Блог

Возможно ли создать диалоговое окно jQuery Mobile с использованием встроенного содержимого на той же странице?

Например:

 <div data-role="page">
    <div data-role="content">

        <!-- this causes the entire current page to load as the dialog -->
        <a href="#modal" data-rel="dialog">Open Dialog<a> 

        <div id="modal" style="display: none">
            Hello World
        </div>

    </div>
</div>
  

Типичный диалог требует, чтобы href связывающего объекта был ссылкой на отдельную «страницу» или ту, которая находится рядом с текущей страницей:

 <div data-role="page">
    <div data-role="content">
        <a href="#modal" data-rel="dialog">Open Dialog<a>
    </div>
</div>
<div data-role="page" id="modal">
    <div data-role="content">
        Hello World
    </div>
</div>
  

Однако моя структура шаблона запрещает мне отделять ссылку от модального содержимого. Если возможно, я хотел бы сохранить модульность в одном подключаемом элементе управления. Создание совершенно новой внешней страницы для модального содержимого было бы громоздким с использованием моей текущей платформы CMS (Sitecore).

Не удалось найти надежное кроссплатформенное готовое решение.
Но Jquery Mobile 1.2 имеет роль «всплывающего окна», поэтому любой div может легко отображаться как всплывающее окно. http://jquerymobile.com/test/docs/pages/popup/index.html

jQueryMobile — SimpleDialog2 позволяет встроенные диалоги http://dev.jtsage.com/jQM-SimpleDialog/demos2 /

 <a href="#" id="opendialog" data-role="button">Open Dialog</a>


  <div id="inlinecontent" style="display:none"   data-options='{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}'>

<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>
<a rel='close' data-role='button' href='#'>Close</a>
 </div>

$(document).delegate('#opendialog', 'click', function() {
// NOTE: The selector is the hidden DIV element.
$('#inlinecontent').simpledialog2();
})