默認情況下Jquery對話框可見

Question

我試圖用JQuery UI測試一個簡單的對話框，但默認情況下對話框是可見的。

fiddle- https://jsfiddle.net/kdh85wha/6/

HTML

<button id="callConfirm">Confirm!</button> 

<div id="dialog" title="Confirmation Required"> 
    Are you sure about this? 
</div> 

的Javascript：

$(function() { 

    $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons : { 
      "Confirm" : function() { 
       alert("You have confirmed!");    
      }, 
      "Cancel" : function() { 
      $(this).dialog("close"); 
      } 
     } 
     }); 

    $("#callConfirm").on("click", function(e) { 
     e.preventDefault(); 
     $("#dialog").dialog("open"); 
    }); 

}); 

Answer 1

我改變了jQuery版本1.9和jQuery UI的1.9 &它是完美的工作

jquery 1.9.1 & jquery ui 1.9.2 

Working fiddle

Answer 2

當您創建的對話框一個div，它必須首先被隱藏。

<div id="dialog" title="Confirmation Required" style="display: none;"> 
    Are you sure about this? 
</div> 

Answer 3

根據此示例（https://jqueryui.com/dialog/#modal-form）下面的代碼是一個工作示例;

var dialog; 
 
$(function() { 
 
dialog = $("#dialog").dialog({ 
 
    autoOpen: false, 
 
    modal: true, 
 
    buttons : { 
 
      "Confirm" : function() { 
 
       alert("You have confirmed!");    
 
      }, 
 
      "Cancel" : function() { 
 
      $(this).dialog("close"); 
 
      } 
 
     } 
 
     }); 
 

 
    $("#callConfirm").on("click", function(e) { 
 
     e.preventDefault(); 
 
     dialog.dialog("open"); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<button id="callConfirm">Confirm!</button> 
 

 
<div id="dialog" title="Confirmation Required"> 
 
    Are you sure about this? 
 
</div>

Answer 4

您正在使用舊版本1.7.2，只是使用jQuery 1.9.1版本或更高。