1

我正在尝试在 jQuery Mobile 中创建一个带有一些警报的全局弹出框。那可能吗？似乎弹出窗口必须位于 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>
4

2 回答 2

0

你是对的，请看这里：

弹出 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>

例子

于 2012-10-03T17:35:00.337 回答
0

不幸的是，到目前为止，弹出窗口必须位于同一页面或同一 data-role="page" div 中（如果您在一个文件中创建多页站点）。为了解决这个问题，我在每个页面上放置了一个占位符弹出框，并在加载站点时使用一些 JS 填充它（或者如果您希望每次单击菜单按钮时）。

下面是一个基本示例，您可以在此处获取完整的详细信息（包括一个关于禁用用户当前页面的菜单选项的小脚本：http: //fromdehart.tumblr.com/post/35555011698/jquerymobile-included-多页站点的弹出菜单

或在此处下载或分叉 GIT 上的完整代码：https ://github.com/fromdehart/jQueryMobile-Included-Popup-Menus/

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

用于创建和发布菜单的 JS

function leftMenu() {
  output = ””;
  //html for menu list items
  output += ‘&lt;li><a data-transition=”slide” href=”#home”&gt;Home</a></li>’;
  output += ‘&lt;li><a data-transition=”slide” href=”#taryn”&gt;Taryn</a></li>’;
  output += ‘&lt;li><a data-transition=”slide” href=”#flula”&gt;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”&gt;leftMenu();</script>
</body>
于 2012-12-19T16:36:06.653 回答