Jquery Mobile：自动显示一个弹出框/对话框

我正在尝试创建一个对话框或弹出式消息，它会自动显示某个条件得到满足。在我的情况下，如果$ .POST失败，我想向用户显示一条消息。我已经从这个SO帖子中得到了建议，并且弹出窗口被显示，但是整个屏幕被弹出窗口覆盖并且关闭按钮不会执行任何操作。Jquery Mobile：自动显示一个弹出框/对话框

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<title>jQuery Mobile Web App</title> 
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/> 
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/> 
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> 
<script src="common.js" type="text/javascript"></script> 
</head> 
<body> 

<div data-role="page" id="contactsPage"> 
    <div data-role="header"> 
     <h1>My Contacts</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" id="contactsList" data-filter="true"> 
     <script> 
     var jqxhr = $.post("http://www.somewhere.com/...", 
     { 
      org_id:"112211", 
      max_last_modified_date:"2000-12-31 13:00:00 +0000" 
     }, 
      function(data) { 
       $('#contactsList li').remove(); 
       JSONResult = JSON.parse(data); 
       for (var i = 0; i < JSONResult.contacts.contact.length; i++) { 
        //Do something 
       } 

       $('#contactsList').listview('refresh'); 
      }); 
      jqxhr.fail(function() { 
       $('#dialogText').html("There was a problem connecting to the internet. Please check your mobile data or WIFI connection and try again."); 
       $.mobile.changePage("#connectionErrorDialog"); 
      }); 
     </script> 
     </ul> 
    </div> 
</div> 

<div data-role="dialog" id="connectionErrorDialog"> 
    <div id="dialogText"></div> 
    <button id="closeDialog">Ok</button> 
</div> 

</body> 
</html>

是否有任何方法来设置屏幕的尺寸，并使关闭按钮的工作？这是自动向用户显示对话框/弹出窗口的正确方法吗？任何援助将不胜感激。

来源

2013-02-20 rosst400

在jQuery Mobile的新版本有Pop Ups

那些弹出窗口的伟大的事情：

// open the popup 
$("#popup").popup("open"); 


// close the popup 
$("#popup").popup("close");

来源

2013-02-20 11:09:08 BorisD

谢谢。我遵循了您提供的链接中的说明，包括更新脚本源引用到最新的JQuery库，如果点击链接打开它，我可以打开弹出窗口，但$（“#popupBasic”）.popup （“打开”）;不会自动打开弹出窗口。 – rosst400 2013-02-21 00:01:52

忽略我的评论。我正在Dreamweaver中开发。我不得不重新启动它，现在它正在工作。谢谢你的帮助。 – rosst400 2013-02-21 00:07:48

另外，弹出窗口的DIV需要位于页面的主DIV标签内，而不是作为单独的DIV外部。 – rosst400 2013-02-21 00:15:34

这是我如何做到这一点的JQM：

$.ajax({ 
    url: "http://www.somewhere.com/...", 
    data: { 
      org_id:"112211", 
      max_last_modified_date:"2000-12-31 13:00:00 +0000" 
      }, 
    sucess: function(data){ 
       $('#contactsList li').remove(); 
       JSONResult = JSON.parse(data); 
       for (var i = 0; i < JSONResult.contacts.contact.length; i++) { 
        //Do something 
       } 

       $('#contactsList').listview('refresh'); 
      }, 
    error: function(textStatus){ 
      $('#dialogText').html("There was a problem connecting to the internet. Please check your mobile data or WIFI connection and try again."); 
       $.mobile.changePage("#connectionErrorDialog"); 
      } 
})

来源

2013-02-20 05:57:29 Red2678

我只是给你一个更简单的方法...因为两个原因：1）我的方式，你不需要每次都改变页面... 2）你也可以动态改变你弹出的内容 – BorisD 2013-02-20 11:45:12

Jquery Mobile：自动显示一个弹出框/对话框

回答

相关问题