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

请单独初始化对话框（不在“ click”事件处理程序内部）。另外，请确保已将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>

切换对话框无法在jQuery中使用。如何在单击按钮时显示动画对话框？

1 个答案: