Bootstrap Modal - 相同的模態多重打開對話框

我有一個模態代碼和模式開啓器鏈接。Bootstrap Modal - 相同的模態多重打開對話框

當我點擊鏈接模式打開，後面的JavaScript發出Ajax請求並在模態內填充元素值。

這工作正常。

但是我需要在模態對話框中生成模態開啓器鏈接，該模態對話框再次打開了非常相同的模態。
我想打開另一個窗口，以便這個新窗口與第一個窗口重疊。因此兩個（或更多）打開相同模式的彈出窗口。

首先，當我在模態窗口中生成模態開啓鏈接時，鏈接已死亡。

比我莫代爾大開眼界鏈接刪除data-toggle="modal"並把這個jQuery代碼聽取和開放模式被點擊鏈接時：

$(".modal_order_details_opener").click(function() { 
    $('#modal_order_details').modal('show'); 
});

這工作，但不是這樣想。

它打開原來的模態和鏈接在那裏，當我點擊該鏈接打開另一個窗口瀏覽器打開另一個模式對話框，但原來的模態對話框消失。

所以問題是：我可以有兩個或更多相同模態的打開窗口嗎？
一個模態代碼，多個打開的對話框實例。

我看過的所有例子都是兩種不同的模式打開的地方。
我在問同一個模式和更多的對話框同時打開。基本上從模態中打開模態。

相同的模式。

謝謝。

來源

2015-09-01 toni rmc

[Multiple modals overlay]的可能重複（http://stackoverflow.com/questions/19305821/multiple-modals-overlay） – mccannf

這是不一樣的。我問打開多個窗口的相同模式。你鏈接的是如何覆蓋不同的模式的問題。 –

如果我理解正確，你想要啓動同一個模態對話框的多個窗口，但是每個對話框上的數據都會有所不同。我對麼？ –

我找到了解決方案，所以我會回答我自己的問題，以防萬一有人想知道。

整個事情的關鍵是jQuery clone()函數。

基本上你有兩個DOM對象的工作：

1 - 鏈接將打開一個模式 - 有「類」命名modal_details_opener
2 - HTML模式本身 - 主要<div>有「身份證」命名modal_details

首先你需要JavaScript回調函數，我將其稱爲callback()。

於是在全球範圍內結束了。js文件或文件時準備好，您註冊callback()被點擊將打開模態鏈接時：

$('.modal_details_opener').click(callback);

記住模式身體有其自身內部的鏈接，其打開相同的模式。
所以裏面callback()體，我們必須：

1 - 查找文檔上的模式
2 - 克隆它
3 - 莫代爾裏面的主體具有打開相同的模式再次，發現這些鏈接和遞歸鏈接結合callback()功能在他們的「click」事件

function callback() { 
    // Find modal body on the document 
    var $currentDetailsModal = $('#modal_details'); 

    // Clone modal and save copy 
    var $cloneDetailsModal = $currentDetailsModal.clone(); 

    // Find links in this modal which open this modal again and bind this function to their click events 
    $(".modal_details_opener", $cloneDetailsModal).click(callback); 
}

通知你必須通過克隆模式作爲上下文的$()功能只隔離到在每個開放模式克隆的鏈接。

來源

2015-09-20 16:17:03

您能否提供一個工作示例？ – dickwan

以下代碼將回答您的問題。如果它不起作用，請讓我知道我會以另一種方式思考。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Large Modal</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>This is a large modal.</p> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">ClickForAnotherModel</button> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal2" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Another Modal</h4> 
     </div> 
     <div class="modal-body"> 
      <p>This is Another Modal on Modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

來源

2015-09-01 19:19:56 Raju

謝謝你的幫助，但事實並非如此。你有兩種模式。我想要的是隻有一個模式（#myModal），並打開更多的窗口在相同的模式，其中鏈接在模態的同一時間。用這種方式來說明：模態包含自己體內的鏈接以再次打開自己，其中前一個窗口保持打開狀態。 –

Bootstrap Modal - 相同的模態多重打開對話框

回答

相關問題