Question

我正在尝试创建一个自动显示某个条件的对话框或弹出消息。在我的情况下，如果$ .POST失败，我想向用户显示一条消息。我已经从这个SO帖子中获取了建议并显示了弹出窗口，但整个屏幕都被弹出窗口覆盖，而关闭按钮则没有做任何事情。

<!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>

有没有办法设置屏幕尺寸并使关闭按钮工作？这是自动向用户显示对话框/弹出窗口的正确方法吗？非常感谢任何帮助。

Answer 1

在新版本的Jquery Mobile中有Pop Ups

关于那些弹出窗口的好处：

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


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

Answer 2

这就是我在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" );
          }
})

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

2 个答案: