1

我正在尝试创建一个对话框或弹出消息，自动显示满足某个条件。就我而言，如果 $.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>

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

4

2 回答 2

5

在新版本的 Jquery Mobile 中有Pop Ups

这些弹出窗口的好处：

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


// close the popup
$("#popup").popup("close");
于 2013-02-20T11:09:08.147 回答
0

这就是我在 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-20T05:57:29.497 回答