1

我开始使用 jquery mobile 开发我的第一个移动应用程序。到目前为止它进展顺利，但我无法解决特定的弹出行为。

一旦用户加载应用程序，我希望它显示一个弹出窗口。这个弹出窗口应该类似于您在许多应用程序中看到的添加到主页弹出窗口。它旨在通过一些重要的按钮将用户方向指向固定页脚。我设法插入此弹出窗口并在页面加载时打开它，但有两件事我无法做。

  1. 我的弹出窗口加载并消失，这是我想要的，没关系。但是，一旦您重新加载页面，或导航到另一个页面并返回，它就会再次打开。这对用户来说很烦人。我希望它仅在您第一次加载主页时打开。

  2. 我想将弹出窗口定位在页脚上方，所以不是在它上面，而是在上面。我该怎么做？我是否使用 x 和 y，如果是，如何使用？

  3. 有没有办法让覆盖效果模糊整个页面，除了页脚？

谢谢你。

这是代码：

    <div data-role="page" id="home">
<div data-position="fixed" data-role="header" data-theme="d">
<h1>Prva pomoć</h1>
    <button data-icon="info" data-iconpos="right"></button>
</div>
<div data-role="content">   
    <ul data-role="listview" data-divider-theme="d">
<li data-role="list-divider">Ne reagira i ne diše
</li>
<li><a href="#page2">Oživljavanje</a></li>
    <li><a href="#page3">Oživljavanje + AVD</a></li>
<li data-role="list-divider">Ne reagira, ali diše</li>
    <li><a href="#page4">Bočni položaj</a></li>
    <li data-role="list-divider">Ostalo</li>
    <li><a href="#page4">Gušenje</a></li></ul></div> 
    <div id="popspot"></div>
    <div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!<p></div>
        <script type="text/javascript" language="JavaScript">
            $(":jqmData(role='page'):last").on("pageshow", function(event) {
              $("#popup", $(this)).popup("open");
               setTimeout(function(){
      $("#popup").popup("close");
    }, 3000);
            });
        </script>
    <div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
<div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
<ul>
    <li><a href="#popup" data-rel="popup" id="chat" data-icon="custom">Zovi Hitnu</a></li>
    <li><a href="#" id="email" data-icon="custom">Oživljavanje</a></li>
    <li><a href="#" id="skull" data-icon="custom">Osobni podaci</a></li>
</ul>
</div>

4

1 回答 1

0

您可以使用 sessionStorage 或 localStorage 来跟踪与是否显示弹出窗口相关的信息。

您的代码将如下所示

if (localStorage.popUpShown != 'true') {
        // window will position the pop up to center
        $('#popup').popup('open', {positionTo: 'window'});

        localStorage.popUpShown = 'true';
        setTimeout(function () {
            $("#popup").popup("close");
        }, 3000);
    }
else{
        // Can remove this alert in development enviornment.
        alert('already shown the popup');
    }

你可以在live fiddle这里查看http://jsfiddle.net/mayooresan/MyaE9/

还对您的 html 进行了一些调整。您的 html 页面中有标记错误。

<div data-role="page" id="home">
    <div data-position="fixed" data-role="header" data-theme="d">

<h1>Prva pomoć</h1>

        <button data-icon="info" data-iconpos="right"></button>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-divider-theme="d">
            <li data-role="list-divider">Ne reagira i ne diše</li>
            <li><a href="#page2">Oživljavanje</a>

            </li>
            <li><a href="#page3">Oživljavanje + AVD</a>

            </li>
            <li data-role="list-divider">Ne reagira, ali diše</li>
            <li><a href="#page4">Bočni položaj</a>

            </li>
            <li data-role="list-divider">Ostalo</li>
            <li><a href="#page4">Gušenje</a>

            </li>
        </ul>
        <div id="popspot"></div>
        <div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
            <p>U slučaju hitnoće koristi ovaj izbornik!</p>
        </div>
    </div>
    <div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
        <div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
            <ul>
                <li><a href="#popup" data-rel="popup" id="chat" data-icon="custom">Zovi Hitnu</a>

                </li>
                <li><a href="#" id="email" data-icon="custom">Oživljavanje</a>

                </li>
                <li><a href="#" id="skull" data-icon="custom">Osobni podaci</a>

                </li>
            </ul>
        </div>
于 2013-04-02T18:49:58.030 回答