彈出彈出的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類更改爲「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> 

最後;如果要清除隱藏的模式內容，請通過自定義的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; 
}); 

希望這有助於！