jQuery mobile popup не отображается при соединении с заголовком

Question

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

Моя проблема заключается в том, что всплывающее окно не отображается при нажатии на кнопку входа:/

Я попытался удалить ui-selectmenu-hidden класс от div но в результате во всплывающем окне отображается без стилей JQuery, как только страница загружается.

Я знаю код, который у меня есть, без данных page или header данных, поскольку я тестировал точный код на другом документе без этих divs.

Вот код, который дает мне проблему:

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Hello World!</h1> 
     <a href="#popupLogin" data-rel="popup" data-position-to="window">Open Popup</a> 
    </div> 
</div> 

<div data-role="popup" id="popupLogin" data-theme="b" class="ui-popup-container ui-selectmenu-hidden popups" data-overlay-theme="a"> 
    <form id="loginForm"> 
     <input type="text" placeholder="Username..." /> 
     <input type="text" placeholder="Password..." /> 
     <input type="button" value="Login" data-theme="b" /> 
     <p>New to The Social Network?</p> 
     <input type="button" value="Register here" /> 
    </form> 
</div> 

Любая помощь здесь будут оценены. Вероятно, я сделал глупую ошибку где-то, но для жизни меня не могу найти.

Answer 1

Если всплывающее окно будет доступно только с этой страницы. Переместите всплывающий div внутри div-data-role = "page" на том же уровне, что и заголовок/контент/нижний колонтитул.

Если вы хотите получить доступ к форме входа в систему из нескольких страниц, сохранить разметку, как есть, но добавить скрипт на документ готов к инициализации виджета и повышения содержания:

$(function(){ 
    $("#popupLogin").enhanceWithin().popup(); 
}); 

DEMO