Question

我正在使用jQuery Mobile弹出窗口，出于某些原因，当我加载页面时，一个或多个弹出窗口未被隐藏。我试过关闭页面init上的弹出窗口，但这似乎不起作用。任何人都可以解释造成这种情况的原因。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pop Up</title>
    <link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
    />
    <link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
    />
    <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
    rel="stylesheet" />
    <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
    rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
    $(document).bind("pageinit", function () {
        $('#popup1').popup('close');
        $('#popup2').popup('close');
    });
</script>

<body>
    <div data-role="page" class="type-interior">
        <div data-role="header" data-theme="f" data-position="fixed">
            <div class="ui-grid-a" style="margin:15px 0px">
                <div class="ui-block-a">
                    <a href="#popup1" data-role="button" data-rel="popup">Pop 1</a>
                </div>
                <div class="ui-block-b">
                    <a href="#popup2" data-role="button" data-rel="popup">Pop 2</a>
                </div>
            </div>
            <!--grid-->
        </div>
        <!-- /header -->
        <div data-role="content">
            <div data-role="popup" id="popup1" data-theme="a">
                <ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
                data-theme="b">
                    <li name='test value' value="us">11</li>
                    <li name='test value' value="us">12</li>
                    <li name='test value' value="us">13</li>
                    <li name='test value' value="us">14</li>
                </ul>
            </div>
            <div data-role="popup" id="popup2" data-theme="a">
                <ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
                data-theme="b">
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                </ul>
            </div>
            <div class="content-primary"></div>
            <!--content-primary-->
        </div>
        <!--content-->
        <div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
        <!--footer-->
    </div>
    <!-- /page -->
</body>

Answer 1

包含以下外部库解决了问题：

    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>


<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
    <script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>

Answer 2

我有类似的问题，并通过在文档准备好后启动弹出窗口来解决问题。

$(document).ready(function(){ 
    $( "#popupDialog" ).popup();
});

jQuery Mobile弹出窗口小部件未隐藏在页面init上

2 个答案: