Javascript 引导模式和mmenu菜单冲突
我正在设计一个使用引导和mmenu库的网站。我正在尝试添加一个引导模式，当单击mmenu中的按钮时，将打开该模式 单击关闭、按ESC键并在模式外部单击时，模式不会关闭 我试着用相同的模式和mmenu编写一个页面，其中模式是通过单击页面上的按钮打开的，而不是在mmenu中，两者都很好 我尝试了当点击mmenu中的按钮时出现的mmenu弹出窗口，但遇到了相同的问题 我也很乐意得到一个一般性的答案； 这两个库可能出现的问题，以及如何解决这些问题。或者如何调试代码，以便我自己能够找到解决方案。我尝试在Chrome中检查控制台，但没有出现错误。我不知道如何进一步检查 我添加了我的代码，以防熟悉mmenu和引导库的人有具体的答案。谢谢大家的努力Javascript 引导模式和mmenu菜单冲突,javascript,jquery,css,twitter-bootstrap,mmenu,Javascript,Jquery,Css,Twitter Bootstrap,Mmenu,我正在设计一个使用引导和mmenu库的网站。我正在尝试添加一个引导模式，当单击mmenu中的按钮时，将打开该模式 单击关闭、按ESC键并在模式外部单击时，模式不会关闭 我试着用相同的模式和mmenu编写一个页面，其中模式是通过单击页面上的按钮打开的，而不是在mmenu中，两者都很好 我尝试了当点击mmenu中的按钮时出现的mmenu弹出窗口，但遇到了相同的问题 我也很乐意得到一个一般性的答案； 这两个库可能出现的问题，以及如何解决这些问题。或者如何调试代码，以便我自己能够找到解决方案。我尝试在C
<!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>
&时代；
情态标题
...
接近
保存更改
-
启动演示模式
$（文档）.ready（函数（）{
$（“#欢迎菜单”）.mmenu({
扩展名：[“主题暗”、“边框全”、“多行”、“pagedim白色”]，
非画布：{
位置：“对”，
Z位置：“前方”
}
});
});
您的代码很好，当单击“关闭”按钮时，modal可以启动和关闭。我已经测试过了。问题出在您的
**引导版本**min顺便说一句，我使用了
v3.1.0（min.js/min.css）jqueryv2.1.1 // Call Business logo modal.
$('#myModal_business').modal({
backdrop: 'static',
keyboard: false,
show: false
});
$(".buttonclass").click( function() {
$('#myModal_business').modal('show');
});
$('#myModal_business').modal('hide');
你的代码运行得很好，我已经测试过了。 贝娄是要检查的小提琴
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Continue as guest</a></li>
</ul>
</div>
</nav>
<div class="row">
<!--a place for tips-->
<div class="col xs-12 hidden-xs col-sm-3 ">
</div>
<!--a place for text-->
<div class="col-xs-12 col-sm-9">
<div class="page-header">
<h1>Welcome.</h1><br />
<small>We are glad to see you here.</small>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$("#welcomeMenu").mmenu({
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"
}
});
});
启动演示模式
&时代；
情态标题
...
接近
保存更改
欢迎光临。
我们很高兴在这里见到你。
$（文档）.ready（函数（）{
$（“#欢迎菜单”）.mmenu({
扩展名：[“主题暗”、“边框全”、“多行”、“pagedim白色”]，
非画布：{
位置：“对”，
Z位置：“前方”
}
});
});
以下是工作模式：删除此文件“CSS/jquery.mmenu.all.CSS”第69行中的z-index:1 反而 删除此文件“CSS/jquery.mmenu.all.CSS”第69行中的z-index:1 将主css文件中的z索引设置为“自动”
.mm-slideout { z-index:auto;}
您可以在自己的css文件中包含以下内容，而不是在jquery.mmenu.all.css中更改某些内容：
body.modal-open .mm-slideout{
z-index:inherit;
}
如果此代码处于联机状态，请告诉我，。我想要你的CSS和js路径，@PunitGajjar，我有一个名为CSS的文件夹，其中包含所有CSS文件，还有一个名为js的文件夹，其中包含所有js文件。它不是在线的。所有css和js文件都是mmenu或bootstrap文件。请为此创建JSFIDLE。可能是因为冲突……请查看是否包含了不止一个的
bootstrap.js.mm滑出{z-index:9999；}body.modal-open .mm-slideout{
z-index:inherit;
}