似乎无法让 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页面相同的文件夹中。我使用bootstrap 3.

删除选择器hide，您不需要脚本，堆栈模态将工作，导致模态不显示的是选择器hide，因为您正在使用bootstrap 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>

工作小提琴

相关内容

最新更新

热门标签：