デフォルトで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

私はそれが完全に#dialogするクラスUI-ダイアログを追加してみてください

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）以下のコードは動作例です。あなたは、古いバージョン1.7.2を使用している

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

、ちょうどjQueryのバージョン1.9.1以降を使用します。