爲什麼Lightbox沒有關閉點擊內容容器外部

我正在製作燈箱。如果我點擊一個按鈕關閉彈出窗口，它會很好地工作，但如果我想通過點擊內容容器外部來關閉它，它不起作用。爲什麼Lightbox沒有關閉點擊內容容器外部

在內容容器之外，我添加了另一個黑色不透明的容器。

這樣，我在外面的容器上添加了一個類。當點擊發生在內容容器上時，它應該被刪除。

var appendthis = ("the div container look over JsFiddle"); 

$('a[data-modal-id]').click(function (e) { 
    $(window).resize(); 
    e.preventDefault(); 
    $("body").append(appendthis); 
    $(".modal-overlay").fadeTo(500, 0.7); 
    var modalBox = $(this).attr('data-modal-id'); 
    $('#' + modalBox).fadeIn($(this).data()); 
}); 

$(".js-modal-close, .modal-overlay").click(function() { 
    $(".modal-box, .modal-overlay").fadeOut(500, function() { 
     $(".modal-overlay").remove(); 
    }); 
});

的jsfiddle：http://jsfiddle.net/Ljmxj8ue/

編輯15年11月19日：問：關閉通過點擊含量的不同容器鴕鳥政策停止只是按一下按鈕YouTube視頻，並導致該錯誤之外：「不能讀取屬性'stopVideo'未定義「。的jsfiddle：http://jsfiddle.net/4f5dksj5/5/

來源

2015-11-17 user5441400

移動這個代碼（和添加的第一行）：

$(".js-modal-close, .modal-overlay").unbind('click'); // Prevents multiple bindings 
$(".js-modal-close, .modal-overlay").click(function() { 
    $(".modal-box, .modal-overlay").fadeOut(500, function() { 
    $(".modal-overlay").remove(); 
    }); 
});

在$('a[data-modal-id]').click結束。之前沒有運行，因爲當您分配$(".js-modal-close, .modal-overlay").click時，該元素不存在。

的jsfiddle：http://jsfiddle.net/MrGarretto/97dns8u5/

來源

2015-11-17 17:48:23 MrGarretto

這不是一個完美的解決方案，因爲'click'會在多次關閉/打開時多次分配給'.js-modal-close'，所以在分配它之前，您還必須解除綁定click事件。 –

Ups，你是對的，現在它的作品非常感謝你。 – user5441400

@MrGarretto我現在有這個解決方案的另一個問題:(我可以通過單擊關閉按鈕上的Contant容器外點擊停止視頻。得到此消息：「無法讀取屬性'stopVideo'undefined」 – user5441400

的問題是，你要一個「click」事件分配給不上它的調用存在的元素。

看到這個小提琴，我已經用

http://jsfiddle.net/Ljmxj8ue/1/

$(document).on('click',".js-modal-close, .modal-overlay", function() {

，而不是固定的，你的問題：

$(".js-modal-close, .modal-overlay").click(function() {

通過綁定文件上點擊 - 它會聽取DOM上的任何點擊並檢查點擊的元素是否具有上面指定的類，如果是 - 它會觸發函數。

來源

2015-11-17 17:48:44

不推薦將代理事件附加到文檔。因爲所有。live（）事件附加在文檔元素處，事件在處理之前處理最長和最慢的路徑 –

完全同意您的意見，這不是最佳解決方案。 @MrGarretto爲這個問題提供了最好的一個。 –

爲什麼Lightbox沒有關閉點擊內容容器外部

回答

相關問題