MJH MJH - 6 months ago 249
jQuery Question

bootstrap modal and mmenu menu clashing

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>
<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>

<!-- 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">&times;</span>
<h4 class="modal-title" id="myModalLabel">Modal title
<div class="modal-body">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
<button type="button" class="btn btn-primary">Save changes
<div class="container-fluid">
<nav id="welcomeMenu" class="col-xs-12 col-sm-5">
<ul class="vertical">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<script type="text/javascript">
$(document).ready(function () {
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"

Here is the fiddle.


Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"

    -webkit-transition:-webkit-transform .4s ease;
     transition:-webkit-transform .4s ease;
     transition:transform .4s ease;
     transition:transform .4s ease,-webkit-transform .4s ease;