Flush jqModal popup content on popup close

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

Я установил триггер в ложь, потому что я заметил, что вы вручную запускаете модалы. По умолчанию используются элементы привязки с классом «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 элементов закрывающего диапазона на "jqmClose", например.

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

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

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

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

Так вот ваш модифицированный пример;

Markup

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

Надеется, что это помогает!