在JQuery Mobile对话框中打开对话框 [英] Opening Dialog from within a Dialog in JQuery Mobile

问题描述

这是我的html：

我正在尝试在没有成功的对话框内打开一个对话框。 pre> < a href =＃popupDialogdata-rel =popupdata-position-to =windowdata-role =buttondata-inline =true data-transition =popdata-icon =deletedata-theme =b>删除页面< / a>
< div data-role =popupid =popupDialogdata-overlay-theme =adata-theme =cdata-dismissible =falsestyle =max-width：400px ;>
< div data-role =headerdata-theme =aclass =ui-corner-top>
< h1>删除页？< / h1>
< / div>
< div data-role =contentdata-theme =d>
< h3 class =ui-title>您确定要删除此页吗？< / h3>
< p>此操作无法撤消。< / p>
< a href =＃data-role =buttondata-rel =backdata-theme =c>取消< / a>
< a data-role =buttondata-rel =backdata-transition =flowdata-theme =bonclick =NewDialog（）;>打开新对话框&一个>
< / div>
< / div>


< div data-role =popupid =popupDialog1data-overlay-theme =adata-theme =cdata-dismissible =false风格= 最大宽度：600px的; >
< div data-role =headerdata-theme =aclass =ui-corner-top>
< h1>顶部删除页？< / h1>
< / div>
< div data-role =contentdata-theme =d>
< h3 class =ui-title>从对话框调用的对话框< / h3>
< p>此操作无法撤消。< / p>
< a href =＃data-role =buttondata-rel =backdata-theme =c> Option-1< / a>
< a href =＃data-role =buttondata-rel =backdata-transition =flowdata-theme =b> Option-2< / a>
< / div>
< / div>


这里是一个小js函数：

  function NewDialog（）
 {
 // alert（Alert-1）; 
（＃popupDialog1）。弹出（打开）; 
 
} 
  

任何想法如何成功地调用第二个对话框？ / p>

JS Fiddle在这里

解决方案

您需要设置第一个弹出的第二个按钮，这是打开新对话框弹出。并将 data-rel 而不是 data-rel =back将其设置为 data-rel =popup，并提供您想要弹出的内容，这是 href - > href =＃popupDialog1

这里是一个小提琴弹出弹出窗口 - > http://jsfiddle.net/EWQ6n/520/

你可以删除 onClick 事件您已设置。

I am trying to open a Dialog from within a Dialog without Success.

Here is my html:

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d" >
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>
        <a data-role="button" data-rel="back" data-transition="flow" data-theme="b" onclick="NewDialog();">Open New Dialog</a>
    </div>
</div>


<div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Top Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d" >
        <h3 class="ui-title">Dialog Called from A Dialog</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-rel="back" data-theme="c">Option-1</a>
        <a href="#" data-role="button" data-rel="back" data-transition="flow" data-theme="b">Option-2</a>
    </div>
</div>

And here is the a small js function:

function NewDialog()
{
    //alert("Alert-1");
    ("#popupDialog1").popup("open");

}

Any idea how can I call the second dialog successfully?

JS Fiddle is here

解决方案

You need to set the first popups second button which is the open new dialog to popup. And set its data-rel instead of data-rel="back" set it to data-rel="popup" and also provide a reference to what you want to popup which is the href --> href="#popupDialog1"

here's a Fiddle with a popup within popup --> http://jsfiddle.net/EWQ6n/520/

And btw you can remove the onClick event you have setup.

这篇关于在JQuery Mobile对话框中打开对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！