代码之家 › 专栏 › 技术社区 › Filippo

JQuery UI对话框未显示

jquery-ui html jquery javascript

Filippo · 技术社区 · 8 年前

当我点击一个按钮时,我试图用JQuery UI显示一个“对话框”,但它没有显示出来。我的程序有问题吗?

这是我的代码:

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

<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>

3 回复 | 直到 8 年前

Snowmonkey 8 年前

初始化并隐藏对话框,就可以了。

$(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>

user3440782 8 年前

我想您在这方面有所欠缺,并且还要确保您使用的是正确版本的jquery

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

Snowmonkey 8 年前

我在JSFIDLE工作过,效果很好,下面是代码:

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

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

<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>