如果按钮调用函数，jQm 弹出窗口不会关闭答案

【问题标题】：jQm popup won't close if button call a function如果按钮调用函数，jQm 弹出窗口不会关闭
【发布时间】：2017-07-18 19:51:05
【问题描述】：

单击会出现弹出窗口，并且在“取消”按钮旁边我还放置了用于函数调用的按钮。我认为只需要一个“关闭”来关闭弹出窗口就足够了，但我需要两次才能关闭它。在这种情况下是我遗漏了什么还是我必须这样写？

<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
   <h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
    <h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<a  class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">Call function</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-transition="flow">To Page 2</a>
  </div>
</div>

function myfunction() {
$("#popMe").popup("close"); 
$("#popMe").popup("close");
alert('Here I'm, in the function');
// ... rest of code
}

【问题讨论】：

标签： jquery-mobile popup

【解决方案1】：

这是一个适合你的 sn-p：

function myfunction() {
  $("#popMe").popup("close");
  console.log("Here I'm, in the function");
  // ... rest of code
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

  <body>
    <div data-role="page" id="page-one">
      <div data-role="content">
        <a href="#popMe" data-rel="popup" class="ui-btn ui-corner-all">PopMe</a>
      </div>
      <div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="b">
          <h1 id='h1pop'>Tap PopUp</h1>
        </div>
        <div role="main" class="ui-content">
          <h3 class="ui-title">Single tap</h3>
          <p>This is a popup...</p>

          <button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">myFunction</button>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
          <a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-transition="flow">To Page 2</a>
        </div>
      </div>
    </div>
  </body>

</html>

请注意：如果您需要 CDN，我建议您使用来自 code.jquery.com 的 jQuery Mobile 库

此外：

恕我直言，如果您需要显示小菜单或纯文本提示，则弹出窗口效果很好，但如果您还需要表单元素或一些复杂的用户交互，我相信带有对话框选项的页面小部件会是更好的选择。这是一个参考：JQM Dialog Pages。

只是一点额外的提示：要跟踪您的函数执行，请尝试使用控制台而不是 window.alert，并注意您如何包含字符串。

【讨论】：

：感谢您的宝贵建议，我会尽量遵循他们以减少错误和无效代码。
@Omar：嗨 Omar，老实说，我无法理解对话框小部件和带有对话框选项的页面是否相同，以及页面的 data-dialog 属性是否为保留。请在此处查看：demos.jquerymobile.com/1.4.5/pages-dialog 并发表您对此的评论...
@Omar: ... 或者 - 如果你有时间的话 - 也许可以看看 1.5 alpha 看看会发生什么。
你是对的。页面可以转换为接受所有页面容器事件的对话框，但“对话框小部件”被删除。 demos.jquerymobile.com/1.5.0-alpha.1/pages-dialog