Question

我只想了解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。

Answer 1

删除选择器hide并且您不需要脚本，堆栈模式将起作用，导致模式未显示的原因是选择器hide，因为您使用的是bootstrap 3和hide有important规则

.hide {
    display: none !important;
}

所以从class="modal hide fade"中删除所有模态，堆叠模态将起作用。

＆＃13;

<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>

＆＃13;

Working Fiddle

似乎无法让jschr bootstrap-modal库工作

1 个答案: