Диалог переключения не работает в jQuery.Как показать диалог анимации при нажатии кнопки? - PullRequest
Новая
       36

Диалог переключения не работает в jQuery.Как показать диалог анимации при нажатии кнопки?

0 голосов
/ 08 декабря 2018

У меня есть кнопка, которая успешно переключает многие элементы на странице, но все они находятся ниже высоты начальной страницы, что приводит к тому, что пользователь не получает четкую обратную связь, которую он успешно переключил.Я хочу использовать диалоговое окно 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" );
    }); 
};

С вдохновением с этой страницы.

А вот и 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, но предпочел бы это решение, спасибо.

1 Ответ

0 голосов
/ 08 декабря 2018

Пожалуйста, инициализируйте ваш диалог отдельно (не внутри обработчика события "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>
...