jQuery Mobile - всплывающее диалоговое окно "на странице"

Question

Я ищу несколько изящное решение, чтобы на одной из моих страниц JQM было диалоговое окно "на странице". Я стараюсь не покидать страницу, потому что всплывающее окно - это «поиск», который помогает пользователю заполнить поле формы. Я не хочу покидать реальную страницу, чтобы не потерять другую информацию, которую пользователь уже ввел.

Моей первой попыткой было использование плагина simpledialog2, который я использую в других частях сайта для всплывающих меню. Хотя он отлично работает для базовых ссылок, он становится неуклюжим в длинных списках. Он чувствует себя очень ограниченным, когда дело доходит до размеров и особенно прокрутки.

Мне несколько нравится встроенная реализация JQM всплывающего окна диалога для длинных множественных выборок. Чтобы дать вам идею, взгляните на это jsfiddle

Кто-нибудь знает, как реализовано это всплывающее окно и можно ли каким-то образом вызвать тот же метод? Если нет, знает ли кто-нибудь об альтернативах про из-за такого «внутристраничного» диалога?

Любая помощь приветствуется.

PS: я не могу использовать многостраничный шаблон в JQM, потому что сайт построен как веб-приложение, и я полагаюсь на загрузку отдельных страниц AJAX, которую многостраничный шаблон не поддерживает.

Answer 1

Диалог, который вы проиллюстрировали в своем jsfiddle, можно легко вызвать на его собственной странице. Вы можете поместить data-rel = "dialog" в тег привязки <a href="dialog.html">dialog</a> или добавить data-role="dialog" в свой контейнер страницы. Вот пример

dialog.html

<div data-role="dialog">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">

    </div>
    <div data-role="footer">
        <h1>Footer</h1>        
    </div>
</div>​

Также обратите внимание, что они планируют создать диалоги на странице, которые, я полагаю, вы ищете в JQM v 1.2. Вот предварительный просмотр этого http://filamentgroup.com/tests/popup/docs/pages/popup/index.html. Так что, если вы действительно терпеливы, вы получите именно то, что искали.

Answer 2

Здесь вам нужно всплывающее окно , не пропускаемое , а не диалог.

<div data-dismissible="false" data-role="popup" id="myPopup">
  <span>Content...</span>
</div>

Теперь в вызове javascript,

$('#myPopup').popup().popup('open');