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の新しいバージョンには、ポップアップがあります

それらのポップアップの素晴らしいところ：

// 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 に答える