jQuery Mobile 弹出小部件未隐藏在页面初始化中答案

【问题标题】：jQuery Mobile Pop Up Widget not hidden on page initjQuery Mobile 弹出小部件未隐藏在页面初始化中
【发布时间】：2013-01-28 22:46:52
【问题描述】：

我正在使用 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>

【问题讨论】：

我无法重现该问题：jsfiddle.net/7YJ7n。这可能是由其他一些外部库引起的

标签： javascript jquery jquery-mobile widget popup

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：