頁面之外的JQuery Mobile Popover

Question

我正在嘗試使用jQuery Mobile中的一些提醒進行全局popover。那可能嗎？它似乎像彈出窗口必須在jQuery的移動頁面才能被訪問。我假設這是因爲該頁面以外的所有內容都不可見。

下面是我正在談論的一個例子。我如何獲得第二個版本的工作？

作品

<div data-role="page" data-theme="a"> 
    <div data-role="content"> 

     <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a> 

     <div data-role="popup" id="alert-popup" data-theme="c"> 
      <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
      <h1>Alert Title</h1> 
      <p> 
       Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy. 
      </p> 
     </div> 

    </div> 
</div> 

不工作

<div data-role="page" data-theme="a"> 
    <div data-role="content"> 

     <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a> 

    </div> 
</div> 



<div data-role="popup" id="alert-popup" data-theme="c"> 
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
    <h1>Alert Title</h1> 
    <p> 
     Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy. 
    </p> 
</div> 

Answer 1

你是正確的，請參閱here：

一個彈出div有被嵌套在同一頁內鏈接。

<div data-role="page" data-theme="a"> 
    <div data-role="content"> 
     <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a> 
    </div> 
    <div data-role="popup" id="alert-popup" data-theme="c"> 
     <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
     <h1>Alert Title</h1> 
     <p> 
      Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy. 
     </p> 
    </div> 
</div> 

EXAMPLE

Answer 2

遺憾的是截至目前的酥料餅有住在同一個頁面或相同數據角色=「頁面」分區（如果您要創建一個多頁面站點在一個文件中）。爲了解決這個問題，我在每個頁面上放置了一個佔位符彈出窗口，並在網站加載時用一些JS填充（或者如果你想每次點擊菜單按鈕）。

下面是一個簡單的例子，你可以在這裏得到充分的詳細信息（包括禁用的菜單選項當前頁面的用戶是一個小腳本：http://fromdehart.tumblr.com/post/35555011698/jquerymobile-included-popup-menus-for-multipage-site

或下載或叉子上GIT的完整代碼在這裏：https://github.com/fromdehart/jQueryMobile-Included-Popup-Menus/

<!— Popup Placeholder —> 
<div data-role=「popup」 id=「lMenu」 data-overlay-theme=「a」 class=「ui-content」 data-position-to=「window」> 
    <a href=」#」 data-rel=「back」 data-role=「button」 data-theme=「a」 data-icon=「delete」 data-iconpos=「notext」 class=「ui-btn-right」>Close</a> 
    <!—create a list where we can populate the menu—> 
    <ul data-role=「listview」 class=「leftMenu」></ul> 
</div> 

JS爲之前在創建和發佈菜單早在HTML

function leftMenu() { 
    output = 」」; 
    //html for menu list items 
    output += ‘<li><a data-transition=」slide」 href=」#home」>Home</a></li>’; 
    output += ‘<li><a data-transition=」slide」 href=」#taryn」>Taryn</a></li>’; 
    output += ‘<li><a data-transition=」slide」 href=」#flula」>Flula</a></li>’; 
    //write html into any items with the <ul> with the class of 「leftMenu」 
    $(‘.leftMenu’).html(output); 
//Targeting a class allows us to input the code in multiple places rather than an ID where it will only effect the first instance of that ID 
} 

身體關閉我們稱之爲菜單功能

<script type=「text/javascript」>leftMenu();</script> 
</body>