Question

在我们的应用程序中，为data-role =＆＃34; popup＆＃34;生成了id。是动态的。

因此，每个项目都有一个唯一的ID

transitionExample101 transitionExample201

单击按钮可以检查是否有任何弹出窗口打开或关闭

这是我的代码

<div role="main" class="ui-content oms-content">
    <div class="myactivelabelsWrap">
         <h3>Item 1</h3>

        <ul>
            <li class="labellist">
                <div class="close"> <a href="#transitionExampleFirst" class="ui-btn ui-corner-all ui-shadow ui-btn-inline closestyle" data-rel="popup" data-position-to="window">First Pop Up</a>

                </div>
            </li>
        </ul>
         <h3>Item 2</h3>

        <ul>
            <li class="labellist">
                <div class="close"> <a href="#transitionExampleSecond" class="ui-btn ui-corner-all ui-shadow ui-btn-inline closestyle" data-rel="popup" data-position-to="window">second Pop UP</a>

                </div>
            </li>
        </ul>
    </div>
    <div data-role="popup" id="transitionExampleFirst" class="ui-content" data-theme="a">
         <h3>I Belong to First DIV</h3>

    </div>
    <div data-role="popup" id="transitionExampleSecond" class="ui-content" data-theme="a">
         <h3>I Belong to Second DIV</h3>

    </div>

    <input type="button"   class="checkifpop" value="Check">

请让我知道如何解决这个问题。

Answer 1

以下是检查弹出窗口是否打开的代码

＆＃13;

$(document).on('click', '.checkifpop', function() {
    if(!$('.ui-popup-active').length)
        alert('not opened');
});

＆＃13;

.searchWrap {
    width:100%;
    float:left;
    height:auto;
    padding:20px;
}
.searchWrap .searchWrap-inner {
    width:100%;
    float:left;
    height:auto;
    position:relative;
}
.searchWrap .extip {
    font-size:12px;
}
.addrestList {
    width:100%;
    float:left;
    height:auto;
    margin-bottom:20px;
}
.addrestList ul {
    width:100%;
    float:left;
    height:auto;
    margin:0px;
    padding:0px;
    list-style:none;
}
.addrestList ul li {
    width:100%;
    float:left;
    height:auto;
    margin:0px;
    padding:20px 20px 10px 20px;
    list-style:none;
    border-bottom:1px solid #ddd;
}
.addrestList ul li .leftlable {
    width:80%;
    float:left;
    height:auto;
}
.addrestList ul li .leftlable .label-wrap {
    float: left;
}
.addrestList ul li .rightlable {
    width:auto;
    float:right;
    height:auto;
}
.addrestList ul li .rightlable .addrest-btn {
    padding:0px;
    margin:0px;
    background:none;
    border:1px solid #ddd;
    border-radius:30px;
    width:42px;
    height:42px;
    float:right;
    line-height: 54px;
    text-align:center;
    color:#ddd;
}
.addrestList ul li .rightlable .addrest-btn:before {
    padding:0px;
    margin:0px;
    font-size:30px;
}
.addrestList ul li .rightlable .addrest-btn-active {
    border:1px solid #46af7c !important;
    color:#46af7c !important;
}
/* My Active Labels Styles */
 .myactivelabelsWrap {
    width:100%;
    height:auto;
    margin-bottom:20px;
}
.myactivelabelsWrap .ui-collapsible-heading {
    margin: 0 !important;
}
.myactivelabelsWrap .ui-collapsible-heading a {
    font-size:20px;
}
.myactivelabelsWrap .ui-collapsible {
    margin: 0px;
}
.ui-collapsible-content {
    border:0px !important;
    padding:0px;
    margin:0px;
}
.labellistUL .label-BtnWrap {
    padding:0 30px;
    margin-top: -9px;
    color:#d03e43;
}
.labellist {
    margin: 0px 30px !important;
    padding: 15px 0 !important;
    border-bottom:1px solid #e6e6e6 !important;
    border-top:0px !important;
}
.labellist .leftlable {
    width:80%;
    float:left;
    height:auto;
}
.labellist .leftlable p {
    font-size: 18px;
}
.labellist .rightlable {
    width:auto;
    float:right;
    height:auto;
    font-size: 18px;
}
.labellist .leftlable .minOrder {
    opacity:0.7;
}
.labellist .leftlable .label-red {
    margin-top: 5px;
    float: left;
}
.labellistDisable {
    background:#f5f5f5;
}
.labellistDisable .leftlable {
    opacity:0.5;
}
.labellistDisable .rightlable a {
    font-size:24px;
}
.listview .label-BtnWrap {
    padding:0 30px;
}
.labelEditIcon {
    position: absolute;
    right: 15px;
    font-size: 20px;
    margin-top: 1px;
    color: #999 !important;
}
.popup_myactivelabels_content {
    font-size:20px;
}
.firstTimeTxt {
    font-size: 30px !important;
    padding: 20px 80px !important;
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div role="main" class="ui-content oms-content">
    <div class="myactivelabelsWrap">
        <h3>Item 1</h3>
        <ul>
            <li class="labellist">
                <div class="close">
                    <a href="#transitionExampleFirst" class="ui-btn ui-corner-all ui-shadow ui-btn-inline closestyle" data-rel="popup" data-position-to="window">First Pop Up</a>

                </div>
            </li>
        </ul>
         <h3>Item 2</h3>

        <ul>
            <li class="labellist">
                <div class="close"> <a href="#transitionExampleSecond" class="ui-btn ui-corner-all ui-shadow ui-btn-inline closestyle" data-rel="popup" data-position-to="window">second Pop UP</a>

                </div>
            </li>
        </ul>
    </div>
    <div data-role="popup" id="transitionExampleFirst" class="ui-content" data-theme="a">
         <h3>I Belong to First DIV</h3>

    </div>
    <div data-role="popup" id="transitionExampleSecond" class="ui-content" data-theme="a">
         <h3>I Belong to Second DIV</h3>

    </div>
    
    <input type="button" class="checkifpop" value="Check">

＆＃13;

Answer 2

你可以这样做：

$(document).on('click', '.checkifpop', function(e)
{
   //console.log($('div.ui-popup-active'));
   var collection = $('div.ui-popup-active');// Get all open popups, if any


   $.each(collection, function(key,popup){

     //You can get ID of the Popup like this:
     //$(popup).attr('id')
     // alert($(popup).attr('id')); // handle each open popup
      if(You_want_to_close_popup){

         $('#'+popupID).popup('close');

      }


   });
});

简而言之，您可以检查是否有任何元素ui-popup-active类。

如果有，则弹出窗口。

观察一下，如果弹出窗口关闭，它将有ui-popup-hidden类。

隐藏弹出窗口：

$(POPUP_ID).popup('close');

打开弹出窗口

$(POPUP_ID).popup('open');

Answer 3

如果您只想关闭任何打开的弹出窗口，则不需要ID：

$('[data-role="popup"]').popup("close");

如果您需要ID：

if ($(".ui-popup-active").length > 0)) {
    var id = $(".ui-popup-active").find('[data-role="popup"]').prop("id");
    $('[data-role="popup"]').popup("close");
}

jQuery Mobile一次只允许最多一个活动弹出窗口。

如何通过单击按钮检查弹出窗口是打开还是关闭

3 个答案: