Menu
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.
579
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;}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
