登陸頁面作爲Jquery Mobile中的對話框

Question

我想讓我的項目的登錄頁面像Jquery Mobile對話框那樣工作。

當您點擊登出的網站時，這與Groupon的位置選擇功能相似。

我該怎麼做？我嘗試複製渲染對話框頁面的各個部分，但這會使內容消失或以其他方式表現異常。

Answer 1

做這樣的工作？

• http://jsfiddle.net/WMvAs/17/
• http://jsfiddle.net/WMvAs/18/（功能）

JS

var showInitialDialog = false; 

if (showInitialDialog === false) { 
    $.mobile.changePage('#landing', 'pop', false, true); 
    showInitialDialog = true; 
} 

$('#home').live('pageshow', function(event, ui) { 
    if (showInitialDialog === false) { 
     $.mobile.changePage('#landing', 'pop', false, true); 
     showInitialDialog = true; 
    } 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Home Page</li> 
      <li><a href="#page2">Page 2</a></li> 
     </ul> 

    </div> 
</div> 

<div data-role="page" id="page2"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Page 2</li> 
      <li><a href="#home">Home Page</a></li> 
     </ul> 

    </div> 
</div> 

<div data-role="dialog" id="landing"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Landing Dialog</li> 
      <li><a href="#home">Go Home</a></li> 
     </ul> 

    </div> 
</div>