关闭弹出窗口并导航到jQuery Mobile中的另一个页面 [英] Close popup and navigate to another page in jQuery Mobile

问题描述

当用户按下弹出窗口中的按钮并导航到另一个页面（单页应用程序，多个页面）时，我试图关闭弹出窗口/对话框。
jQM 1.4.0

如果我点击弹出框中的YES按钮，它将导航到＃page3，我想要但是然后跳回到首页。
如果我注释掉.popup（close）;它工作，但我需要关闭弹出之前，我做的东西。这里有什么不对？

js

  $（＃popupyes ）.on（tap，function（e）
 {
 $（＃popupDialog）。popup（close）; //< ---- does not work 
 
 //在导航到＃page3 
}之前调用一些js函数）;; 
  

html

 < a href =＃popupDialogdata-rel =popupdata-position-to =windowdata-transition =popclass =ui-btn ui-corner-all ui-shadow UI-BTN-A>按钮和LT; / A> 
 
< div data-role =popupid =popupDialogdata-overlay-theme =adata-theme =adata-dismissible =falsestyle =max -width：400像素;> 
< div data-role =headerdata-theme =a> 
< h1>头< / h1> 
< / div> 
< div data-role =mainclass =ui-content> 
< h3 class =ui-title>文字。< / h3> 
< p>文字？< / p> 
< a href =＃page3class =ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a> No< / a> 
 < a id =popupyeshref =＃page3class =ui-btn ui-shadow ui-corner-all ui-btn-inline>是< / a> 
< / div> 
< / div> 
  

更新我可以使用 $（＃popupDialog）。hide（）;
但是它仍然在内存中，只隐藏...或等待，它会在一段时间后自行终止？

解决方案

您可以简单地监听 popupafterclose 以在 完全关闭。

  $（document）.on（pagecreate，function（）{
 $（＃popupID a）。on（tap，function（）{
 / *做某事* / 
 $（＃popupID）。popup（{
 afterclose ：function（）{
 / * do something * / 
} 
}，close）; 
}）; 
}）; 
  

Demo

I'm trying to close a popup / dialog when a user presses a button inside the popup, and navigate to another page (single page application, multiple "pages"). jQM 1.4.0

If I tap the YES-button inside the popup, it will navigate to #page3 wich I want but then jump back to the startpage. If I comment out the .popup("close"); it works, but I need to close the popup before I do stuff. What is wrong here?

js

$("#popupyes").on("tap", function(e)
    {
        $("#popupDialog").popup("close"); // <---- doesn't work

        //call some js-function before navigate to #page3
    });

html

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Button</a>

            <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;">
                <div data-role="header" data-theme="a">
                <h1>Head</h1>
                </div>
                <div data-role="main" class="ui-content">
                    <h3 class="ui-title">Text.</h3>
                <p>Text?</p>
                    <a href="#page3" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">No</a>
                    <a href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-right ui-icon-delete" data-rel="back">Abort</a>
                    <a id="popupyes" href="#page3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Yes</a>
                </div>
            </div>  

Update I can use $("#popupDialog").hide(); But then it's still in memory, only hidden... or wait, will it terminate by itself after a while?

解决方案

You can simply listen to popupafterclose to call any function after popup is completely closed.

$(document).on("pagecreate", function () {
    $("#popupID a").on("tap", function () {
        /* do something */
        $("#popupID").popup({
            afterclose: function () {
              /* do something */
            }
        }, "close");
    });
});

Demo

这篇关于关闭弹出窗口并导航到jQuery Mobile中的另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！