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：自動顯示一個彈出框/對話框

回答

相關問題