javascript - 加载页面时，应在 jquery mobile 的弹出窗口中打开一条消息

Question

加载页面时，应在 jquery mobile 的弹出窗口中打开一条消息。是否可以。我有以下代码，其中使用按钮，单击弹出窗口将打开，但我在加载页面后直接需要它而不单击任何内容。请有人帮助我，谢谢。

<div id="content-area">
        <div class="list_icon"><img src="images/reset.png" width="42" height="41"/></div>
                    <div class="list_head">Reset Progress</div>
                    <div class="list_reset">
                        <a href="#popupStatus" data-rel="popup"><img src="images/reset_btn.png" /></a>
                    </div>  
       <div data-role="popup" id="popupStatus" data-position-to="window" data-corners="true" >
                <div data-role="content">
                    <div class="ui-popup">Do you want to Reset the progress</div>
                    <br/>                       
                    <hr >
                    <div id="confirm_btn">
                        <div style="width:40%;float:left">
                            <a href="#" onClick="resetprogress();" data-role="button" data-inline="true"  data-theme="c">
                                Yes
                            </a>
                        </div>
                        <div style="width:40%;float:right;">
                            <a href="#" class="ui-corner-all" data-role="button" data-rel="back" data-inline="true" data-transition="flow" data-theme="b">
                                No
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

• 首先，data-role="popup" 应该是 data-role="page" 的直接子 。不要将其放置在任何其他 div 内，否则，它将无法正常运行/打开。

• 要以编程方式打开或关闭弹出窗口，请使用 .popup("open") 或 .popup("close")。

• 如果没有 setTimeout()，则无法在 pageshow 上调用弹出窗口。您需要延迟打开它以确保页面已通过所有事件并完全显示。

• 更新:要从按钮关闭弹出窗口，请添加 data-dismissible="false" 和 data- popup div 的 History="false" 属性。要关闭按钮，请添加 data-rel="back"，或以编程方式关闭它 .popup("close")。

  $(document).on("pageshow", "#page_ID", function () {
    setTimeout(function () {
      $("#popup_ID").popup("open");
    }, 100);
  });
  

Demo