切换对话框在 jQuery 中不起作用。如何在按钮单击中显示动画对话框？

Question

我有一个按钮可以成功切换页面上的许多元素，但它们都低于起始页的高度，导致用户无法清楚地获得他们已成功切换的反馈。我想使用一个 jQuery 对话框，当我成功打开其他元素时，它会打开。

所以我做了这个（jQuery）：

 window.onload = function () {
    $("#toggleAllSSSP").click(function () {
      $(".SSSP").toggle('fast');
      $( "#toggleSuccess" ).dialog({
        autoOpen: false,
        show: {
          effect: "blind",
          duration: 1000
        },
        hide: {
          effect: "explode",
          duration: 1000
        }
      });
      $( "#toggleSuccess" ).dialog( "open" );
    }); 
};

With inspiration from this page.

这是 HTML

<button id="toggleAllSSSP">Show 4 levels of principles Principles (Default=3)</button>
<div id="toggleSuccess" title="Toggle success">
    <p>You're now displaying 4 levels of Principles!</p>
</div>

我尝试将 css 添加到 #toggleSuccess，结果元素在 DOM 流中正常显示。我知道我可以使用 window.alert 但更喜欢这个解决方案，谢谢。

Answer 1

请单独初始化您的对话框（不在“点击”事件处理程序中）。另外请确保您已将 jquery 和 jquery.ui 包含到您的脚本中（+ jquery.ui.css）。希望对您有所帮助。

$("#toggleAllSSSP").click(function () {
  $(".SSSP").toggle('fast'); 
  $("#toggleSuccess").dialog( "open" );
}); 
    
$("#toggleSuccess").dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="toggleAllSSSP">Show 4 levels of principles Principles (Default=3)</button>
<div id="toggleSuccess" title="Toggle success">
  <p>You're now displaying 4 levels of Principles!</p>
</div>