bootstrap模态和mmenu菜单冲突 [英] bootstrap modal and mmenu menu clashing
问题描述
我正在使用bootstrap和mmenu库设计网站。
I'm designing a site using bootstrap and mmenu libraries. I'm trying to add a bootstrap modal that opens when clicking a button in mmenu.
点击关闭时，模态不会关闭，按ESC并点击模态外。
The modal doesn't close when clicking close, pressing ESC and clicking outside the modal.
我尝试使用相同的modal和mmenu写入网页，点击页面按钮打开模态，而不是在mmenu ，并且都很好。
I tried writing a page with the same modal and mmenu, where the modal opens by clicking a button on the page, not in the mmenu, and both worked fine.
我尝试了一个mmenu弹出窗口，当mmenu中的按钮被点击，但是有相同的问题。
I tried a mmenu popup that appears when the button inside the mmenu is clicked, but had the same problem.
我会很高兴与一个通用的答案，以及;
这两个库可能会出现问题，以及如何解决它们。或者如何调试代码，以便我可以自己找出解决方案。我试过检查控制台在Chrome，但没有错误。我不知道如何检查任何进一步。
I'd be happy with a generic answer as well; Where problems with these two libraries can arise, and how to get around them. Or how to debug the code so that I can figure out the solution myself. I tried checking the Console in Chrome but there were no errors there. I don't know how to check any further.
我添加了我的代码，以防万一熟悉mmenu和bootstrap库的人有特定的答案。非常感谢您的努力。
I added my code just in case someone who is familiar with the mmenu and bootstrap libraries has a specific answer. Thank you all for your effort.
<!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>
Here is the fiddle.
推荐答案
删除此文件CSS / jquery.mmenu.all.css的第69行中的z-index：1
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
在主css文件中将z-index设置为auto
set z-index in your main css file to auto
.mm-slideout { z-index:auto;}
这篇关于bootstrap模态和mmenu菜单冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
