弹出窗口在 jquery mobile 1.4.0 中正常工作？

Posted 2023-05-09

【中文标题】弹出窗口在 jquery mobile 1.4.0 中正常工作？

【英文标题】：popup working properly in jquery mobile 1.4.0?

【发布时间】：2014-03-18 00:22:27

【问题描述】：

我正在创建一个弹出窗口，当一个进程完成并且在更改页面弹出窗口之前没有显示。我的代码是

 <div data-role="popup" id="confirm" data-overlay-theme="none" data-theme="none" style="max-width:100%;background:url(images/alert-bg.png) repeat-x;" class="ui-corner-all">
            <div data-role="header" data-theme="none" class="ui-corner-top warning-border">
                <h1 style="color:#fff;font-size:14px;font-family:Verdana, Geneva, sans-serif;">Warning</h1>
            </div>
            <div data-role="main" data-theme="d" class="ui-corner-bottom ui-content">
                <h3 class="ui-title alert" style="color:#fff;font-size:16px;font-family:'Nova Square', Arial, Helvetica, sans-serif;font-weight:400;"></h3>
                <a href="#" data-role="button" data-rel="back" data-mini="true" data-transition="flow" data-theme="a" style="background-color:#fff !important;color:#4f72b3;">OK</a> 
            </div>
        </div>

然后像这样调用弹出窗口

 $("h3.alert").html("");
 $("h3.alert").append("User is alerady Exist");
 $("#confirm").popup();
 $("#confirm").popup("open");
 $.mobile.pageContainer.pagecontainer('change', '#enroll-screen', 
                        transition: 'pop',
                       changeHash: false,
                        reverse: true,
                        showLoadMsg: true
                    );

但不显示弹出窗口？如何解决这个问题

【问题讨论】：

您是在页面更改之前调用popup 吗？它不会出现。一旦触发pagebeforechange，它将关闭。您应该在弹出窗口关闭后更改页面。

jsfiddle.net/Palestinian/YLn6C 看看这个

@Omar 谢谢..我试试这个方法

好的，如果它解决了您的问题，请告诉我。

此外，您不需要执行此“.pageContainer.pagecontainer”，因为现在页面内的所有小部件都将自动初始化。与此 "$("#confirm").popup();" 相同看这里。 jsfiddle.net/85RSU

【参考方案1】：

你是正确的 html 和 js，但是你想在这个页面里面的内容中弹出哪个页面只有你放你的 html 代码。 例如：

 <div data-role="page" id="indexpage">
 <div>header</div>
   <div>content
//here paste your popup html code`
  </div>

  <div>footer</div>
 </div>

注意：当时显示索引页面时仅显示此弹出窗口。你想要所有页面意味着你需要动态附加 html