Question

我手机网站上有按钮。我想做以下事情：

当我按下按钮时，会出现弹出窗口。此弹出窗口应包含一些文本和一个确定按钮。当我按下Ok按钮时，弹出窗口应该消失，没有别的。该页面应保持相同的条件。

我的代码如下：

<a id="edit-btn2" data-rel="popup" data-transition="slide" data-position-to="window" class= "edit-button1"  data-role="button" href="#popupPanel"></a>

<div data-role="popup" id="popupPanel" data-dismissible='false' data-corners="false" data-theme="b"  style="height:100px; width:300px;">
  <p>This is just a demonstrator</p>
  <button href="#" id= "popup-button"  data-theme="c" data-icon="false" data-mini="false"  >OK</button>
</div>

javascript如下：

$( "#popup-button" ).click(function() {
  $( "#popupPanel" ).popup( "close" );
});

目前的情况是：

当我点击确定按钮时，它第一次工作但不是后者。

Answer 1

使用<a>代替<button>。您的代码应如下所示：

<a id="edit-btn2" data-rel="popup" data-transition="slide" data-position-to="window" class="edit-button1" data-role="button" href="#popupPanel"></a>

<div data-role="popup" id="popupPanel" data-dismissible="false" data-corners="false" data-theme="b" style="height:100px; width:300px;">
  <p>This is just a demonstrator</p>
  <a href="#" data-role="button" data-rel="back" id="popup-button" data-theme="c" data-icon="false" data-mini="false" >OK</a>
</div>

Demo

我还添加了

data-role="button" data-rel="back"

在这种情况下不需要Javascript

Answer 2

使用Class而不是id作为按钮。

Html - 按钮

href="#" class= "popup-button"  data-theme="c" data-icon="false" data-mini="false"

的JavaScript

$( ".popup-button" ).click(function() {
  $( "#popupPanel" ).popup( "close" );
});

Answer 3

将您的代码包裹在pageinit中，并使用.on使用正确的事件绑定。

$(document).on("pageinit", function () {
    $("#popup-button").on("click", function () {
        $("#popupPanel").popup("close");
    });
});

或者，将data-rel="back"属性添加到button。但是，如果您希望使用此功能，则添加data-history="false"会更安全，以便不返回上一页。

<button href="#" id= "popup-button"  data-theme="c" data-rel="back" data-history="false">OK</button>

<强> Demo

jquery弹出关闭功能不起作用

3 个答案: