2013-08-17 38 views
5

Tôi chắc chắn tôi chỉ thiếu một số thứ cơ bản, nhưng bất kỳ ai cũng có thể thấy bất kỳ điều gì sai với mã sau không? Khi tôi nhấp vào nút đầu tiên, nó không mở một popup. Nút thứ hai mở cửa sổ bật lên dưới dạng hộp thoại.Không thể có cửa sổ bật lên để hoạt động trong 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> 

Trả lời

7

Thực ra đó là một điều nhỏ bạn đang bỏ lỡ! =)

jQuery 1.3 Mobile Pop-up Docs:

... sau đó tạo ra một liên kết với các href thiết lập để id của popup div, và thêm các thuộc tính dữ liệu rel = "popup" nói với khuôn khổ để mở cửa sổ bật lên khi liên kết được khai thác. Đây là một mẫu đánh dấu tương tự cho tiện ích hộp thoại. Một div popup phải được lồng trong cùng một trang với liên kết.

Di chuyển số <div id="menu-items"></div> vào trong nút <div id="home" data-role="page"><div>, sau đó phải như vậy!

Làm việc jsFiddle bao gồm. Dialogs không còn được dùng như jQuery Mobile 1.4.0 và sẽ bị xóa trong 1.5.0.

3

tôi nghĩ rằng có hai điều:

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' 

fiddle làm việc: http://jsfiddle.net/REthD/10/

Các vấn đề liên quan