Question

单击产生弹出窗口出现并旁边＆＃34;取消＆＃34;按钮我也把按钮用于功能调用。我认为这足以让一个＆＃34;关闭＆＃34;关闭弹出窗口，但我需要两次才能关闭它。在这种情况下，我是否遗漏了某些东西，或者我必须以这种方式写出来？

<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
}

Answer 1

以下是适用于您的代码段：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

<强>此外：

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

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

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

1 个答案: