默认情况下可以看到Jquery对话框

Question

我试图使用Jquery UI测试一个简单的对话框但是默认情况下对话框是可见的。

小提琴 - 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

为对话框创建div时，最初必须隐藏它。

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

Answer 2

我将jquery版本更改为1.9，将jquery ui更改为1.9＆amp;它是完美的工作

PHImageManager

Working fiddle

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或更高版本。