【发布时间】:2016-05-04 10:49:12
【问题描述】:
我正在使用 bootstrap 和 mmenu 库设计一个网站。我正在尝试添加一个引导模式,该模式在单击 mmenu 中的按钮时打开。
单击关闭、按 ESC 并在模态外部单击时,模态不会关闭。
我尝试使用相同的模式和菜单编写一个页面,其中模式是通过单击页面上的按钮打开的,而不是在菜单中,并且两者都运行良好。
我尝试了当单击 mmenu 内的按钮时出现的 mmenu 弹出窗口,但遇到了同样的问题。
我也很乐意得到一个通用的答案; 这两个库在哪里可能出现问题,以及如何解决它们。或者如何调试代码,以便我自己找出解决方案。我尝试在 Chrome 中检查控制台,但那里没有错误。我不知道如何进一步检查。
我添加了我的代码,以防熟悉 mmenu 和 bootstrap 库的人有具体的答案。谢谢大家的努力。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.themes.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.all.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.positioning.css" rel="stylesheet" />
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/jquery.mmenu.all.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
</head>
<body>
<!-- Modal -->
<button type ="button"><a href="#welcomeMenu">Menu</a></button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title
</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Save changes
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<nav id="welcomeMenu" class="col-xs-12 col-sm-5">
<div>
<ul class="vertical">
<li>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</li>
</ul>
</div>
</nav>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#welcomeMenu").mmenu({
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"
}
});
});
</script>
</body>
</html>
【问题讨论】:
-
如果此代码在线,请告诉我。我想要你的 CSS 和 js 路径,。
-
@PunitGajjar,我有一个名为 CSS 的文件夹,其中包含所有 css 文件和一个名为 JS 的文件夹,其中包含所有 js 文件。它不在线。所有的 css 和 js 文件都是 mmenu 或 bootstrap 的。
-
请为此创建 jsfiddle。
-
可能是因为冲突...看看你是否多次包含
bootstrap.js -
是的。可能与此冲突。
标签: javascript jquery css twitter-bootstrap mmenu