Flush jqModal всплывающее содержимое при закрытии всплывающего окна

Question

Я использую всплывающие окна 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>

Answer 1

Этот код выглядит немного странно. Инициализируйте ваши модалы один раз через;

$('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. Я часто сталкиваюсь с этой проблемой (например, чтобы остановить воспроизведение видео без необходимости беспокоиться о API JavaScript в плагине).

Что-то вроде

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;
});

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