Блог

Я использую всплывающие окна jqModal, используются два разных всплывающих окна, которые запускаются из разных разделов кода. Оба всплывающих окна запускаются плавно, но когда я закрываю всплывающее окно и открываю другое, окно наложения заполняет содержимое обоих всплывающих окон. Я использую jqmHide (), чтобы закрыть всплывающее окно. Есть ли способ сбросить содержимое всплывающего окна, когда я его закрываю?

 $('a.jqModal').click(function(event){
        event.stopPropagation();
        $( $(this).attr('href') )
            .jqm({ modal:true, overlay:80, toTop: true })
            .jqmShow();

        return false;
    });

    $(".jqm").click(function () {
        $("#Dv_AddProfile").jqmHide();
        $("#Dv_DuplicateProfile").jqmHide();
    });
  

HTML:

 <div id="Dv_AddProfile" class="jqmWindow">
   <span id="Spn_Close" class="jqm"><button>Close</button></span>
   //...
   //popup content

</div>
<div id="Dv_DuplicateProfile" class="jqmWindow">
   <span id="Spn_Close" class="jqm"><button>Close</button></span>
   //...
   /// popup content
</div>
  

этот код выглядит немного странно. Инициализируйте свои модальности один раз с помощью;

 $('div.jqmWindow').jqm({
  modal:true, 
  overlay:80, 
  toTop: true, 
  trigger: False
});
  

Я установил триггер в значение false, потому что я заметил, что вы вручную запускаете модалы. По умолчанию выполняется поиск элементов привязки с классом «jqModal».

Вы не включили элементы привязки в свой пример HTML, но я предполагаю, что они выглядят как:

 <a href="#Dv_AddProfile" class="jqModal">Open AddProfile Modal</a>
<a href="#Dv_DuplicateProfile" class="jqModal">Open DuplicateProfile Modal</a>
  

Затем вы можете аналогичным образом запускать модальности без необходимости event.stopProgogation() ; например

 $('a.jqModal').click(function(){
  $( $(this).attr('href') ).jqmShow();
    return false;
});
  

Теперь давайте воспользуемся поведением closeClass по умолчанию. Таким образом, вам не нужна функция $(«.jqm»).click (), чтобы закрыть ваши модалы.

Измените класс jqm закрывающих элементов span на «jqmClose», например

 <div id="Dv_DuplicateProfile" class="jqmWindow">
  <span id="Spn_Close" class="jqmClose"><button>Close</button></span>
  //...
  /// popup content
</div>
  

ПРИМЕЧАНИЕ: возможно, вам потребуется переместить класс jqmClose в элемент button для запуска события click; например

 <span id="Spn_Close"><button class="jqmClose">Close</button></span>
  

НАКОНЕЦ, если вы хотите очистить содержимое модального окна при скрытии, сделайте это с помощью пользовательского обратного вызова onHide. Я часто сталкиваюсь с этой проблемой (например, чтобы остановить воспроизведение видео без необходимости беспокоиться о javascript api в плагине).

Что-то вроде

 onHide: function(hash){
  // hide modal
  hash.w.hide();

  // clear content
  $('div.cleared-on-close',hash.w).empty();

  // remove overlay
  hash.o.remove();
}
  

Итак, вот ваш измененный пример;

Разметка

 <a href="#Dv_AddProfile" class="jqModal">Open AddProfile Modal</a>
<a href="#Dv_DuplicateProfile" class="jqModal">Open DuplicateProfile Modal</a>

<div id="Dv_AddProfile" class="jqmWindow">
   <span id="Spn_Close"><button class="jqmClose">Close</button></span>
   <div class="cleared-on-close">...</div>
   ...
</div>
<div id="Dv_DuplicateProfile" class="jqmWindow">
   <span id="Spn_Close"><button class="jqmClose">Close</button></span>
   <div class="cleared-on-close">...</div>
   ...
</div>
  

Javascript

 $('div.jqmWindow').jqm({
  modal:true, 
  overlay:80, 
  toTop: true, 
  trigger: False,
  onHide: function(hash){
    // hide modal
    hash.w.hide();

    // clear content
    $('div.cleared-on-close',hash.w).empty();

    // remove overlay
    hash.o.remove();
  }
});

$('a.jqModal').click(function(){
  $( $(this).attr('href') ).jqmShow();
  return false;
});
  

Надеюсь, это поможет!