JQuery мобильное глобальное всплывающее окно для всех страниц

Ответ 1

Если вы используете jQuery Mobile 1.4.1

Документация говорит, что вы можете повторно использовать одно и то же всплывающее окно на нескольких страницах, если объявите его как прямой дочерний элемент body. Затем он может отображаться на любой странице документа:

<div id="popup-outside-page" data-theme="a">
    <!-- This popup has its theme explicitly defined via data-theme="a"
         because it has no parent from which to automatically inherit
         its theme -->
    <ul data-role="listview">
        <li>Global Menu</li>
        <li><a href="#demo-intro">Intro Page</a></li>
        <li><a href="#other-page">Other Page</a></li>
        <li><a href="#third-page">Third Page</a></li>
    </ul>
</div>
<div id="other-page" data-role="page" data-url="other-page">
    <div data-role="header">
        <a href="#popup-outside-page" data-rel="popup">Menu</a>
        <h1>Another Page</h1>
    </div>
    <div role="main" class="ui-content">
        <p>This is another page that can be reached using the links in the global menu.</p>
    </div>
</div>
<div id="third-page" data-role="page" data-url="third-page">
    <div data-role="header">
        <a href="#popup-outside-page" data-rel="popup">Menu</a>
        <h1>Third Page</h1>
    </div>
    <div role="main" class="ui-content">
        <p>This is a third page that can be reached using the links in the global menu.</p>
    </div>
</div>

Если вы определяете всплывающее окно вне любой страницы, вы должны позаботиться о том, чтобы создать экземпляр виджета самостоятельно. Вы можете сделать это уже в DOMReady, потому что всплывающее окно не находится на любой странице:

// Instantiate the popup on DOMReady, and enhance its contents
$( function() {
    $( "#popup-outside-page" ).enhanceWithin().popup();
});

Если вы хотите, чтобы всплывающее окно было открыто из набора ссылок, вы также должны обрабатывать это вручную, поскольку автоматическая обработка с помощью data-rel= "popup" ограничена всплывающими окнами активного стр.

Если вы используете более старые версии jQuery Mobile

Короткий ответ заключается в том, что вы не можете. В документации указано, что:

Всплывающий div должен быть вложен внутри той же страницы, что и ссылка

Таким образом, вам нужно будет скопировать и вставить всплывающее окно на каждую страницу, которую вы хотите отобразить, что не похоже на хорошее решение.

Когда мне нужно что-то, что ведет себя как глобальное всплывающее окно, я обычно перехожу с dialog, который можно открыть с любой страницы.

Сам диалог имеет ту же структуру, что и страница:

<div id="diag" data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Info</h1>
    </div>
    <div data-role="content" data-theme="c">
        <h1>Thank you for your time!</h1>
        <a data-role="button" data-rel="back">Ok</a>
    </div>
</div>

И вы можете открыть его программно:

$.mobile.changePage("#diag");

Или одним нажатием кнопки, как и на любой другой мобильной странице jQuery:

<a href="#diag" data-role="button" data-rel="dialog" data-theme="a">Open dialog</a>

Ответ 2

Взгляните на этот ответ

fooobar.com/info/538370/...

Существует плагин, который может помочь вам, пока команда мобильных jquery добавит поддержку всплывающих окон, определенных за пределами страницы, в которой они используются. Обратите внимание, что демо-версия не работает, но в локальной и заменяет jquery js она работает.

Это запрос jqm:

https://github.com/jquery/jquery-mobile/issues/4565

По-видимому, он может быть добавлен в jqm 1.4