javascript - 切换对话框在 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>