JQuery mobile: всплывающее окно удалено из DOM

На моих страницах JQUerymobile у меня есть встроенное всплывающее окно. Вот пример моего содержания страницы:JQuery mobile: всплывающее окно удалено из 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 разметку с конца страницы и вставить его внутри div с 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-13 15:37:31 krishgopinath

Привет и спасибо за ваш пример. Он работает очень хорошо, пока я не хочу добавить стиль в div, для которого data-role = "content". .popup(), .trigger ('create'), .trigger ('pagecreate') ... Кажется ничего не меняет. «header» и «content» не обрабатываются JQM, и стиль не добавляется к сгенерированной DOM. Есть идеи ? –

Можете ли вы обновить мою скрипку ур кодом? – krishgopinath

JQuery mobile: всплывающее окно удалено из DOM

ответ

Смежные вопросы