Диалоговое окно JQuery, которое отображается по умолчанию

Question

Im пытается проверить простое диалоговое окно с использованием 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 или выше.