2014-02-05 118 views
0

我试图在没有成功的情况下从对话框中打开一个对话框。在JQuery Mobile的对话框中打开对话框

这里是我的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> 

这里是一个小的js函数:

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

} 

任何想法,我怎么能叫成功的第二个对话框?

JS Fiddle is here

回答

1

您需要设置first popup的第二个按钮,这是open new dialog弹出。并设置其data-rel,而不是data-rel="back"将其设置为data-rel="popup",并且还提供给您想要弹出这是什么href参考 - >href="#popupDialog1"

这里与弹出式内弹出一个小提琴 - >http://jsfiddle.net/EWQ6n/520/

顺便说一句,你可以删除您设置的onClick事件。

+0

谢谢你! data-rel解决了这个问题。 – Anjum