问题
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.
The modal doesn't close when clicking close, pressing ESC and clicking outside the modal.
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.
I tried a mmenu popup that appears when the button inside the mmenu is clicked, but had the same problem.
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.
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.
回答1:
instead
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
set z-index in your main css file to auto
.mm-slideout { z-index:auto;}
回答2:
Instead of changing something in jquery.mmenu.all.css you could include the following in your own css-files:
body.modal-open .mm-slideout{
z-index:inherit;
}
回答3:
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
.mm-slideout{
-webkit-transition:-webkit-transform .4s ease;
transition:-webkit-transform .4s ease;
transition:transform .4s ease;
transition:transform .4s ease,-webkit-transform .4s ease;
z-index:1
}
回答4:
your codes is fine and modal can launch and close when button close clicked. I've already tested. the problem is in your **bootstrap version**.
I see you use bootstrap.css not min.css. If you feel you have fast speed connection as well as your hosting, there will be no problem. otherwise, use with min.
BTW, I use v3.1.0 (min.js/min.css) and jQuery v2.1.1
回答5:
Your code is working perfectly, i have tested this. bellow is the Fiddle to check.
<!-- 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"
}
});
});
Here's the work modal: http://jsfiddle.net/okkf2bsr
回答6:
i had a same problem before . so what i did.
i add the below code in jquery.
// Call Business logo modal.
$('#myModal_business').modal({
backdrop: 'static',
keyboard: false,
show: false
});
then after on button click through jquery you can close or open the modal. like this
$(".buttonclass").click( function() {
$('#myModal_business').modal('show');
});
To hide the modal
$('#myModal_business').modal('hide');
来源：https://stackoverflow.com/questions/35038146/bootstrap-modal-and-mmenu-menu-clashing