關閉jQuery模式框

我想創建一個基本模式我自己，我在這裏有點麻煩（也許這是因爲我是一個專家與jQuery工作 - 不要把它認真）。關閉jQuery模式框

我有這樣的HMTL標記：

<div id="modal-boxes"> 
    <div id="modal-updates" class="modal-content"> 
     Content for modal box here. 
     <a href="#" class="close-modal">Close</a> 
    </div> 
</div> 
<div id="modal-mask"></div>

所以，我做了告訴模式對話框關閉，使消失#mask格的功能。另外一個當我在它外面點擊時，它仍然會關閉。換句話說，單擊＃modal-updates div外部的內容與點擊關閉按鈕的內容相同。但問題是，當我想要在＃modal-updates div內部單擊時（不應該消失），它仍然會關閉。這裏是我的javascript代碼：

$(".modal").click(function(e){ 

    e.preventDefault(); // Cancel the default link behavior 

    $("#modal-mask").fadeTo(400, 0.4); 
    $("#modal-boxes").fadeIn(); 

    var getName = "#" + $(this).attr("name"); 
    $(getName).fadeTo(400, 1); 
}); 

function closeModal() { 
    $("#modal-mask, #modal-boxes").fadeOut(); 
} 

$(".close-modal").click(function(e){ 
    e.preventDefault(); 
    closeModal(); 
}); 

$(".modal-content").click(function(){ 
    closeModal(); 
});

任何幫助嗎？

問候，蒂亞戈卡斯特羅

來源

2012-04-19 Tiago Castro

你能展示一個這個問題的演示嗎？ – Starx 2012-04-19 23:40:59

是的你可以：http://jsfiddle.net/webtiago/z6Z6w/ – 2012-04-19 23:47:34

嘗試：

$('#modal-updates').click(function(e) { 
    e.stopPropagation(); 
});

如果使用得當，這將停止從$("#modal-boxes").click()觸發。

[編輯]固定一個錯字，並添加鏈接jsFiddle它爲什麼不使用jQuery的模式對話框工作

來源

2012-04-19 23:49:03 CWSpear

是的，它的工作;）感謝您的幫助。 – 2012-04-19 23:56:10

沒問題。一次或兩次完成同樣的事情。 – CWSpear 2012-04-19 23:56:55

？

關於你的例子：

1）的鏈接，我更喜歡做這樣的事情：

<a href="javascript:void(closeMyPopup());" class="close-modal">Close</a>

這樣，無需處理像的preventDefault或點擊事件

2）我想這不是將你的點擊事件綁定到「.modal-content」，而是想把它綁定到「＃modal-mask」;）

來源

2012-04-19 23:51:59 tibo

jQuery模態？ ...你的意思是jQuery UI，也許？ – 2012-04-19 23:54:49

jQuery UI抱歉;） – tibo 2012-04-20 00:00:16

關閉jQuery模式框

回答

相關問題