如何在打開事件之前隱藏jquery對話框？

我有一個按鈕，觸發一個彈出如下。我從服務器端拉出一些信息，將其顯示在彈出窗口中。問題是需要一段時間才能拉起服務器端的信息，我的對話框會打開爲空，然後在1-2秒後顯示信息。它很煩人。只有當服務器端信息準備就緒時，纔有辦法顯示對話框？如何在打開事件之前隱藏jquery對話框？

function openPopup(id) 
    { 
     $("#divPopup").dialog({ 
      resizable: true, 
      height: 200, 
      width: 300, 
      modal: true, 
      title: 'Popup Title', 
      buttons: { 
       OK: function() {       
        //TODO 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      }, 
      open: function (event, ui) { 
       // Can I hide the dialog popup before the info is ready? 
       populateInfo(id); 
       addDialogBGConfirm($(this).parent().css('z-index') - 1); 
      }, 
      close: function (event, ui) { 
       removeDialogBGConfirm(); 
      } 
     }); 
    } 

    function populateInfo(id) 
    { 
     $.ajax({ 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      url: window.location.href + "/GetServerSideInfo", 
      data: "{'profileId': '" + id + "'}", 
      dataType: 'json', 
      success: function (res) { 
       // populate popup controls based on server side info 
       $('.pname').text(res.d[0]); 
       // ...       

      }, 
      error: function (data, textStatus) { 
       alert('Error in calling method'); 
      } 
     }); 
    }

來源

2016-05-13 Deceleven

顯示加載動畫裏面彈出是更好的方法，你問什麼可以鼓勵用戶點擊兩次按鈕打開彈出窗口（假設點擊某個按鈕後打開）。 – yogi

謝謝！但是我想在服務器端信息準備好之前隱藏所有的控件。我試圖把一個顯示器：在開放的第一行沒有css，但它似乎並沒有工作... – Deceleven

如何在ajax完成後打開對話框？ P.S我實際上支持@yogi的解決方案 –

你可以嘗試換一個Promise您openPopup(id)左右。

例如，如果你在本地取一個文件，並使用它，它被加載後，它應該看起來像

$.get("data/file.txt").then(useFile);

與useFile在於處理file.txt內容的功能。

欲瞭解更多信息檢查http://www.html5rocks.com/en/tutorials/es6/promises/

來源

2016-05-13 09:56:38 midzer

謝謝！這工作。 – Deceleven

我設法通過顯示彈出式內加載動畫是什麼@yogi建議解決這個問題。這是通過簡單地在我的彈出HTML創建一個加載的div，然後添加以下的$就成功方法的末尾：

$('.loading').css("display", "none"); // loading animation div 
$('.InfoSection').css("display", "block"); // real content

來源

2016-05-16 02:54:39 Deceleven

如何在打開事件之前隱藏jquery對話框？

回答

相關問題