使用jQuery打開多個視頻嵌入式模式

Question

我想在webflow中使用jQuery製作多種模式，現在我只能做一個，如果我重複它只是坐在對方的代碼。

我有8個鏈接圖像，應該打開8個不同的模式窗口，每個窗口都包含自己的嵌入式視頻，並在近距離關閉它們，因爲它現在仍在後臺播放。我正在使用webflow.com js，爲此工作了一個星期，現在是js的新手，但是由於這個原因，表單開始研究它，我的大腦受傷了:)。請幫助

下面是HTML標記：

<div class="w-section modal-bg"> 
    <div class="w-clearfix modalw"><a href="#" class="close-modal">X</a> 
     <div class="w-embed w-iframe"> 
     <iframe height="498" width="510" src="http://video1" frameborder="0" allowfullscreen=""></iframe> 
     </div> 
    </div> 
    </div> 

<div class="w-section modal-bg1"> 
    <div class="w-clearfix modalw"><a href="#" class="close-modal">X</a> 
     <div class="w-embed w-iframe"> 
     <iframe height="498" width="510" src="http://video2" frameborder="0" allowfullscreen=""></iframe> 
     </div> 
    </div> 
    </div> 

CSS：

.modal-bg { 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     right: 0px; 
     bottom: 0px; 
     z-index: 9999; 
     display: none; 
     width: auto; 
     margin: 20px auto auto; 
     background-color: transparent; 
    } 

    .modalw{ 
     width: 50%; 
     margin-right: auto; 
     margin-left: auto; 
     padding: 10px; 
    } 

    .close-modal { 
     padding-right: 10; 
     padding-left: 10px; 
     float: right; 
    } 

    } 

jQuery代碼：

$(document).ready(function() { 
    $('.modal-link').click(function() { 
    $('.modal-bg').fadeIn(); 
    }); 
    $('.close-modal').click(function() { 
    $('.modal-bg').fadeOut(); 
    }); 
}); 

Answer 1

您是否嘗試過使用.toggle()方法？ 像這樣：

$(document).ready(function() { 
    $('.modal-link').click(function() { 
    $('.modal-bg').toggle(); 
    }); 
    $('.close-modal').click(function() { 
    $('.modal-bg').toggle(); 
    }); 
}); 

您還可以指定一個持續時間爲撥動像.toggle(400)其中指定的數字單位爲毫秒模仿.fadeIn()/.fadeOut()
更多信息here。