Twitter bootstrap Can'；似乎无法让jschr引导模式库正常工作_Twitter Bootstrap_Bootstrap Modal

Twitter bootstrap Can'；似乎无法让jschr引导模式库正常工作

twitter-bootstrap

Twitter bootstrap Can'；似乎无法让jschr引导模式库正常工作,twitter-bootstrap,bootstrap-modal,Twitter Bootstrap,Bootstrap Modal,我只是想了解引导模式库是如何工作的，因为我需要能够在我的页面上使用堆叠模式。然而，我似乎不能得到更多比覆盖显示。以下是我所拥有的： <!DOCTYPE html> <html lang="en"> <head> <title>checkbox</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, i

我只是想了解引导模式库是如何工作的，因为我需要能够在我的页面上使用堆叠模式。然而，我似乎不能得到更多比覆盖显示。以下是我所拥有的：

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


var modalManager=$（“body”）.data（“modalManager”）；
var openModals=modalManager.getOpenModals（）；

查看是否可以获取对模态管理器的引用，但模态管理器未定义。我不知道这是否是css和脚本标记的顺序问题，或者是什么问题。它们都包含在与html页面相同的文件夹中。我正在使用bootstrap 3。

删除选择器

隐藏

，并且您不需要脚本，堆栈模态将工作，导致模态不显示的是选择器

隐藏

，因为您正在使用bootstrap 3，并且

隐藏

具有

重要

规则

.hide {
    display: none !important;
}

因此，从所有模态和堆栈模态中删除它


查看演示
×
堆叠一
一个好身体
一个好身体
一个好身体
发射模态
接近
好啊
×
第二层
一个好身体
一个好身体
发射模态
接近
好啊
×
第三组
一个好身体
接近
好啊

我应该把这个问题提交给bootstrap-modal.js的作者。他的演示文档是错误的。可能是文档是旧的，没有更新，

hide

selector在B.S-2中与modals一起使用，但在B.S-3中被删除