在一個頁面上打開多個模式框

我有一個頁面，當頁面上的相應鏈接被點擊時，需要打開不同的模式框。我已經得到了結構和JavaScript爲一個窗口工作，但我不能讓它工作多個。我想我需要遍歷每個模態框......但不能完全弄清楚語法。在一個頁面上打開多個模式框

這是爲客戶的WordPress網站，我使用高級自定義字段來填充內容。該頁面還沒有公佈，所以這裏是一個說明我的代碼codepen：http://codepen.io/FelixB/pen/EPvEVG

代碼：

var modal = document.getElementsByClassName('modal-window'); 

var btn = document.getElementsByClassName("click-to-open"); 

var span = document.getElementsByClassName("close")[0]; 

for (var i = 0; i < btn.length; i++) { 
    var thisBtn = btn[i] 
    thisBtn.onclick = function() { 
    alert("hello"); 

    //modal.style.display = "block"; 
    } 
} 

span.onclick = function() {  
    modal.style.display = "none"; 
} 

window.onclick = function(event) { 

}

來源

2016-01-13 Felix B

您必須模態獨有以後能夠選擇它們。一種方法是通過id。

<div id="modal-window-one" class="modal-window modal"></div> 
<div id="modal-window-two" class="modal-window modal"></div>

您需要定義哪個按鈕應打開哪個窗口。一個可能的解決方案是通過data-attributes

<div class="click-to-open" data-modal="modal-window-one"> //will open modal one 
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two

然後 - 事件：

var btn = document.getElementsByClassName("click-to-open"); 

for (var i = 0; i < btn.length; i++) { 
    var thisBtn = btn[i]; 
    thisBtn.addEventListener("click", function(){ 
    var modal = document.getElementById(this.dataset.modal); 
    modal.style.display = "block"; 
}, false);

再次 - 這是一個可能的解決方案。

來源

2016-01-14 19:38:05 pgk

成功！現在這個工作正在進行中，幾個小時之後，我就擺弄着可能性。謝謝！！（我無法贊成，顯然 - 太新了，我會盡快答覆。）再次感謝！ –

我很高興能幫上忙。不要擔心upvote，只需將答案標記爲已完成，這樣其他用戶就不會處理它。 :) – pgk

pgk，我希望你能幫助我多一點這個項目。我怎樣才能讓模態自己在模態之外點擊關閉。關閉點擊關閉按鈕的作品，但如果用戶點擊窗口中的任何位置，我希望它們關閉。你有什麼建議嗎？ –

下面是一個使用bootstrap顯示多個彈出窗口的示例，同時附上了展示示例的jsfiddle。將類名稱設置爲模式對話框。

<div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    ... 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> </div></div>

實例化模式對話框。

$('.myModal').modal();

下面是一個運行的jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/

來源

2017-02-01 11:40:10 Nitesh

在一個頁面上打開多個模式框

回答

相關問題