Jquery mobile：popup从DOM中删除

在我的JQUerymobile页面中，我嵌入了弹出式div。这里是我的网页内容的例子：Jquery mobile：popup从DOM中删除

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

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

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

因为弹出窗口从DOM移除，代码波纹管什么也不做（实际工作之前）：

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

有没有让我的弹出窗口在我的DOM的解决方案？

是否有更好的位置在源代码中嵌入弹出窗口？
另一种方式可以从外部（缓存）页面加载弹出窗口，但我从来没有达到这样做的JavaScript。

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

来源

2013-07-12 Pierre Le Roux

你想用同样的弹出式的几页？为什么你在增加弹出的时候已经在DOM'$（'＃popupOne'）。trigger（'create'）;'？ – Omar

（两者）您的HTML展示位置在此处可能不正确。从页面的末尾删除popupOne标记，并将其与data-role=content这样粘贴div内：

<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-13 15:37:31 krishgopinath

嗨，谢谢你的例子。它工作得很好，直到我想在data-role =“content”的div中添加样式。 .popup（），.trigger（'create'），.trigger（'pagecreate'）...似乎没有改变任何东西。 “标题”和“内容”不会被JQM解析，并且样式不会添加到生成的DOM中。任何想法？ –

可以用你的代码更新我的小提琴吗？ – krishgopinath

Jquery mobile：popup从DOM中删除

回答

相关问题