5

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">&times;</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.

10
  • let me know if this code is online,. i would like to have your CSS and js path,. Commented Jan 27, 2016 at 13:05
  • @PunitGajjar, I have a folder called CSS with all the css files and a folder called JS with all the js files. It's not online. all the css and js files are mmenu's or bootstrap's.
    – MJH
    Commented Jan 27, 2016 at 13:09
  • Please Create jsfiddle for this. Commented Jan 27, 2016 at 13:09
  • 1
    may be because of conflict ...see if you have included bootstrap.js more than once
    – Amar Singh
    Commented Jan 27, 2016 at 13:10
  • 1
    yeah . may be conflict with this . <script src="JS/jquery-1.11.3.min.js"></script> <script src="JS/jquery.mmenu.all.min.js"></script> Commented Jan 27, 2016 at 13:12

6 Answers 6

15

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;}
0
6

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;
}
2
  • 2
    By far easiest solution. Watch the typo though inherit*
    – essepikker
    Commented May 24, 2017 at 14:52
  • Oh, you are right - i corrected it :) thanks for your hint Commented May 24, 2017 at 18:07
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
}
2

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

7
  • I downloaded bootstrap.min again from bootstrap's site and replaced the one in the project with the new one. The modal still doesn't work for me.
    – MJH
    Commented Jan 27, 2016 at 13:25
  • did the clash can solve your problem? what version are you using now? including, css, js and jquery? (the three is a must)
    – Joe Kdw
    Commented Jan 27, 2016 at 13:53
  • I'm using the latest bootstrap and mmenu version, as I just downloaded it this week. jquery is 1.11.3 as you can see in my code,
    – MJH
    Commented Jan 27, 2016 at 14:01
  • try to remove these links first. <br /> <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.mmenu.all.min.js"></script> to see if there's a conflict
    – Joe Kdw
    Commented Jan 27, 2016 at 14:03
  • I need those links for my mmenu. They are vital.
    – MJH
    Commented Jan 27, 2016 at 14:05
2

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">&times;</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

7
  • No it doesn't. If you look at your fiddle you'll see that my mmenu is showing. it is not supposed to show. your not using the mmenu libraries, which are causing the problem I want to solve.
    – MJH
    Commented Jan 27, 2016 at 14:04
  • okey, the issue is with z-index. add .mm-slideout{z-index: 9999;} this css check below fiddle, and let me know if this is working or not. fiddle Commented Jan 27, 2016 at 14:13
  • I saw youre fiddle, but there is only the modal there. Not a mmenu. Please see my updated question.
    – MJH
    Commented Feb 14, 2016 at 8:32
  • can you create your fiddle and send me link so i can debug there? Commented Feb 15, 2016 at 6:38
  • here you go. JSFiddle. In the fiddle I have slightly different problems with them. You'll see.
    – MJH
    Commented Feb 15, 2016 at 9:53
1

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');
2
  • I used your code, and the modal still doesn't close. What do you mean you had the same issue? My problem is clashing between mmenu libraries and bootstrap libraries.
    – MJH
    Commented Jan 27, 2016 at 13:32
  • 1
    try send us your css and js files. Commented Jan 27, 2016 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.