在jQuery Mobile中使用一个按钮打开或关闭弹出窗口

Question

在jQuery Mobile中使用一个按钮打开或关闭弹出窗口

3

我正在尝试制作一个 jquery mobile 弹出按钮，它应该执行两个功能： 第一次点击：打开弹出窗口； 第二次点击：关闭该弹出窗口；

我已经制作了以下内容： - 一个可解除的按钮，可以通过编程方式打开弹出窗口；这是我使用的代码： http://jsfiddle.net/MKHnS/ JS:

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

         })

现在我需要做以下事情： - 做出第二个功能：再次点击同一个按钮应该关闭弹窗；

如有建议和帮助，将不胜感激...

- Ayo

1

使用jQuery toggle()。http://api.jquery.com/toggle/ - Sarvap Praharanayuthan

http://demos.jquerymobile.com/1.3.0-beta.1/docs/pages/popup/index.html - Suhas Gosavi

您不能使用 data-dismissible=false，因为点击弹出窗口外部的任何区域都将被忽略。如果将其设置为 true，则在单击弹出窗口外部时将立即关闭弹出窗口。 - Omar

感谢@SuryaS的建议，我在jquery方面还是很新手，对它不太了解。我尝试了toggle()，但仍然有一些问题：弹出窗口只有在点击两次后才会出现，并且overlayTheme仍然存在。也许我没有正确使用toggle()？这是我的fiddle链接：http://jsfiddle.net/64RGw/ - Ayo

嗨，@Omar，我给按钮设置了更高的z-index，在弹出窗口期间它是不可关闭的，但仍然可以点击。 - Ayo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Omar · Accepted Answer

检查弹出窗口是否打开，然后相应地使用 .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