2013-08-17 5 views
5

Уверен, что я просто пропустил что-то основное, но может ли кто-нибудь увидеть что-то не так со следующим кодом? Когда я нажимаю первую кнопку, она не открывает всплывающее окно. Вторая кнопка открывает всплывающее окно в виде диалога.Не могу получить всплывающее окно для работы в jQuery Mobile

<!DOCTYPE html> 
<html> 
<head> 
    <!-- JQUERY MOBILE CSS --> 
    <link rel="stylesheet" href="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
    <!-- JQUERY --> 
    <script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>         
    <!-- JQUERY MOBILE --> 
    <script src="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="home"> 
     <div data-role="content"> 
      <p><a href="#menu-items" data-role="button" data-rel="popup" data-inline="true">Open Popup</a></p> 
      <p><a href="#menu-items" data-role="button" data-rel="dialog" data-transition="pop">Open Popup(dialog)</a></p> 
     </div> 
    </div> 
    <div id="menu-items" data-role="popup"> 
     <ul data-role="listview"> 
      <li><a href="http://www.google.com">google.com</a></li> 
      <li><a href="http://www.google.com">google.com</a></li> 
     </ul> 
    </div> 
</body> 
</html> 

ответ

7

Действительно, это небольшая вещь, которую вам не хватает! =)

jQuery 1.3 Mobile Pop-up Docs:

... затем создать связь с HREF установлен в ид всплывающей DIV, и добавить атрибут данных отн = «всплывающее окно», чтобы сказать рамки, чтобы открыть всплывающее окно при нажатии ссылки. Это аналогичный шаблон разметки для виджета диалогового окна. Всплывающее окно должно быть вложено внутри той же страницы, что и ссылка.

Перемещение <div id="menu-items"></div> в пределах <div id="home" data-role="page"><div> узла, то это должно быть!

jsFiddle прилагается. Dialogs устарели от jQuery Mobile 1.4.0 и будут удалены в 1.5.0.

3

я думаю, что есть две вещи:

I). for opening a popup you have to place popup content inside the data-role='page' 

II). for opening a dialog you have to place dialog content outside the data-role='page' 

работает скрипку: http://jsfiddle.net/REthD/10/