Question

我试图显示＆＃34;对话框＆＃34;当我点击一个按钮时，使用JQuery UI，但它没有显示。我的程序有问题吗？

这是我的代码：

＆＃13;

$(function() {
  $("#mode").click(function() {
    $("#dialog").dialog("open");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

＆＃13;

Answer 1

初始化并隐藏对话框，然后你很好。

$(function() {
  $("#dialog").dialog({autoOpen: false});
  
  $("#mode").click(function() {
    $("#dialog").dialog("open");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

Answer 2

我猜你在那里缺少并确保你使用正确版本的jquery

[39, Moto KTM DUKE, /images/products/product39/m_39_0.jpg]

Answer 3

我在Jsfiddle工作，这里工作得很好是代码：

＆＃13;

$( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#mode" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/eggplant/jquery-ui.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

＆＃13;

JQuery UI对话框不显示

3 个答案: