1

在我的 JQUerymobile 页面中，我嵌入了弹出 div。这是我的页面内容的示例：

<html>
  <head>...</head>  
  <body>
     <div data-role="page" id="myPage" data-dom-cache="true"  data-theme="a">
            <div data-role="content" data-theme="a" >...</div>
            <div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
            <div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">

        </div>

     </div>
     <div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
    ...
     </div>
  </body>
</html>

我从页面导航到其他页面。突然，当我检查我的代码时，我的嵌入式弹出窗口从我的 DOM 中消失了。

如我的示例所示，源代码中的弹出位置似乎没有改变任何问题。

由于弹出窗口已从 DOM 中删除，因此下面的代码什么也不做（它实际上之前工作过）：

    $('#popupOne').trigger('create');
    $('#popupOne').popup({ transition: "slidedown", position:"position-header" });
    $('#popupOne').popup('open');

有没有办法让我的弹出窗口保留在我的 DOM 中？

  • 是否有更好的位置在源代码中嵌入弹出窗口？
  • 另一种方法可能是从外部（缓存）页面加载弹出窗口，但我从未通过 javascript 做到这一点。

任何解决问题的想法（或解决方法）？

4

1 回答 1

1

（两者）您的 HTML 展示位置可能在此处不正确。从页面末尾删除popupOne标记并将其粘贴到divwith中，data-role=content如下所示：

 <div data-role="page" id="myPage" data-dom-cache="true"  data-theme="a">
    <div data-role="content" data-theme="a" >
         <div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
    </div>
    <div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>       
 </div>

如果你想复用弹窗，我建议你走 JS 的方式。您可以即时创建弹出窗口并打开它们。这是一些可以做到这一点的代码。随意将其更改为您想要的任何东西:)

$.extend({
    "makePopup": function (text) {
        var $popup;
        //creat popup element
        $popup = $("<div/>", {
            "data-role": "popup",
                "data-theme": "a",
                "data-overlay-theme": "a",
                "data-transition": "pop"
        }).popup();
        //create close element
        var $close = $("<a/>", {
            "data-role": "button",
                "html": "Close",
                "href": "#",
                "data-theme": "e"
        }).on("click", function () {
            //click event of close element
            $(this).closest("[data-role=popup]").popup("close");
        }).buttonMarkup();

        //create content div - makes a nice jQM page structure.
        var $content = $("<div/>", {
            "data-role": "content",
            //change this any way you want- Im just adding the text from clicked link here.
            "html": "<span>" + text + "</span>"
        });

        //append $close to $content, then append $content to $popup
        $content.append($close).appendTo($popup);
        return $popup;
    }

});

当你想使用它时，就这样做，

 var popupEl = $.makePopup("Some HTML");

然后你可以说，打开它：

 popupEl.popup("open");

或者简单地说，

 $.makePopup("Some HTML").popup("open");

这是一个演示：http: //jsfiddle.net/hungerpain/xjz3V/

希望这是你想要的:)

于 2013-07-13T15:37:31.670 回答