在jquery mobile中使用一个按钮关闭和打开弹出窗口

Posted 2023-05-09

【中文标题】在jquery mobile中使用一个按钮关闭和打开弹出窗口

【英文标题】：close and open popup with one button in jquery mobile

【发布时间】：2014-02-20 18:44:41

【问题描述】：

我正在尝试制作一个 jquery mobile 弹出按钮，它应该执行两个功能：

第一次点击时：打开弹出窗口；

第二次点击时：关闭该弹出窗口；

我已经做了： - 以编程方式打开弹出窗口的可关闭按钮； 这是我正在使用的代码：http://jsfiddle.net/MKHnS/

JS：

    $(document).on('click', '#zozo', function ()        
         $('#zozo-list').popup();        
         $('#zozo-list').popup('open');

         )

现在我需要： - 制作second功能：下一次点击同一个按钮应该关闭弹出窗口；

任何建议和帮助将不胜感激......

【问题讨论】：

使用 jQuery 切换（）。 api.jquery.com/toggle

demos.jquerymobile.com/1.3.0-beta.1/docs/pages/popup/index.html

您不能，使用data-dismissible=false 将忽略弹出窗口之外的任何点击。设置为true 如果在弹出窗口外单击，将立即关闭弹出窗口。

感谢@SuryaS 的建议，我是 jquery 的新手，不太了解。我已经尝试过 toggle()，但仍然存在一些问题：仅在单击两次后才会出现弹出窗口，并且 overlayTheme 仍然存在。也许我没有正确使用toggle（）？！这是小提琴：jsfiddle.net/64RGw

嗨，@Omar 我给了按钮更高的 z-index 并且在弹出期间它是不可关闭的，它仍然是可点击的。

【参考方案1】：

检查弹窗是否打开，对应.popup("open")或.popup("close")。

$(document).on('click', '#zozo', function () 
    if ($(".ui-popup-active").length > 0) 
        $('#zozo-list').popup('close');
     else 
        $('#zozo-list').popup('open');
    
);

Demo

【讨论】：

哇，..它的工作！ @Omar 这正是我所需要的，谢谢兄弟明确的回答！