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

不幸的是，到目前为止，popover必须存在于同一页面或相同的data-role =“page”div中（如果您在一个文件中创建一个多页网站）。为了解决这个问题，我在每个页面上放置一个占位符弹出窗口，并在加载网站时使用某些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

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
}

回到身体结束前的HTML中，我们将调用菜单功能

  <script type=“text/javascript”>leftMenu();</script>
</body>

JQuery Mobile Popover页面之外

2 个答案: