似乎無法讓jschr bootstrap-modal庫正常工作

我只是想了解bootstrap-modal庫的工作方式，因爲我需要能夠在頁面上使用堆疊模式。但是，我似乎無法獲得比覆蓋層更多的出現。以下是我有：似乎無法讓jschr bootstrap-modal庫正常工作

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>checkbox</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <link rel="stylesheet" href="bootstrap-modal.css"> 
    <link rel="stylesheet" href="bootstrap-modal-bs3patch.css"> 

</head> 
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#stack1">View Demo</button> 
<div id="stack1" class="modal hide fade" tabindex="-1" data-focus-on="input:first"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3>Stack One</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    <p>One fine body…</p> 
    <p>One fine body…</p> 
    <input type="text" data-tabindex="1"> 
    <input type="text" data-tabindex="2"> 
    <button class="btn" data-toggle="modal" href="#stack2">Launch modal</button> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn">Close</button> 
    <button type="button" class="btn btn-primary">Ok</button> 
    </div> 
</div> 

<div id="stack2" class="modal hide fade" tabindex="-1" data-focus-on="input:first"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3>Stack Two</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    <p>One fine body…</p> 
    <input type="text" data-tabindex="1"> 
    <input type="text" data-tabindex="2"> 
    <button class="btn" data-toggle="modal" href="#stack3">Launch modal</button> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn">Close</button> 
    <button type="button" class="btn btn-primary">Ok</button> 
    </div> 
</div> 

<div id="stack3" class="modal hide fade" tabindex="-1" data-focus-on="input:first"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3>Stack Three</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    <input type="text" data-tabindex="1"> 
    <input type="text" data-tabindex="2"> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn">Close</button> 
    <button type="button" class="btn btn-primary">Ok</button> 
    </div> 
</div> 

<script src="jquery-2.1.4.min.js"></script> 
<script src="bootstrap.min.js"></script> 
<script src="bootstrap-modalmanager.js"></script> 
<script src="bootstrap-modal.js"></script> 



</body> 
</html>

我真的只是複製並從演示站點粘貼，並試圖得到這個打算，並打算用我自己的內容修改，但我不知道我錯過了什麼。我曾嘗試在底部的腳本：

<script> 
    var modalManager = $("body").data("modalmanager"); 
    var openModals = modalManager.getOpenModals(); 
</script>

，看看我能得到的模態管理器的引用，但modalManager是不確定的。我不知道這是否與css和腳本標記的順序或什麼有關。所有這些都包含在與html頁面相同的文件夾中。我使用的引導3.

來源

2015-10-15 eatinasandwich

刪除選擇hide，你不需要腳本，堆模態會工作，是什麼造成模態不顯示是選擇hide爲您正在使用引導3 hide具有important規則

.hide { 
    display: none !important; 
}

所以從class="modal hide fade"刪除它從所有的模態和堆棧模式將工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal-bs3patch.css" /> 
 
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
 
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script> 
 
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#stack1">View Demo</button> 
 
<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h3>Stack One</h3> 
 

 
    </div> 
 
    <div class="modal-body"> 
 
     <p>One fine body…</p> 
 
     <p>One fine body…</p> 
 
     <p>One fine body…</p> 
 
     <input type="text" data-tabindex="1"> 
 
     <input type="text" data-tabindex="2"> 
 
     <button class="btn" data-toggle="modal" href="#stack2">Launch modal</button> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn">Close</button> 
 
     <button type="button" class="btn btn-primary">Ok</button> 
 
    </div> 
 
</div> 
 
<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h3>Stack Two</h3> 
 

 
    </div> 
 
    <div class="modal-body"> 
 
     <p>One fine body…</p> 
 
     <p>One fine body…</p> 
 
     <input type="text" data-tabindex="1"> 
 
     <input type="text" data-tabindex="2"> 
 
     <button class="btn" data-toggle="modal" href="#stack3">Launch modal</button> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn">Close</button> 
 
     <button type="button" class="btn btn-primary">Ok</button> 
 
    </div> 
 
</div> 
 
<div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h3>Stack Three</h3> 
 

 
    </div> 
 
    <div class="modal-body"> 
 
     <p>One fine body…</p> 
 
     <input type="text" data-tabindex="1"> 
 
     <input type="text" data-tabindex="2"> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn">Close</button> 
 
     <button type="button" class="btn btn-primary">Ok</button> 
 
    </div> 
 
</div>

Working Fiddle

來源

2015-10-16 00:15:26 Shehary

我應該提起這引導-modal.js的作者。那麼他的演示文檔是錯誤的。 – eatinasandwich

可能是文件老舊不更新，'隱藏'選擇器與B.S-2中的模態一起使用，但在B.S-3中刪除 – Shehary

似乎無法讓jschr bootstrap-modal庫正常工作

回答

相關問題