bootstrap modal and mmenu menu clashing

Question

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.

let me know if this code is online,. i would like to have your CSS and js path,. — Punit Gajjar, Jan 27 '16 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, Jan 27 '16 at 13:09
I'm willing to bet your jQuery scripts are clashing. Check your dev console for errors. — Drew Kennedy, Jan 27 '16 at 13:10
may be because of conflict ...see if you have included `bootstrap.js` more than once — Amar Singh, Jan 27 '16 at 13:10
@DrewKennedy, Of course they are clashing. That is problem I need to solve. I checked my console and there are no errors, by the way. — MJH, Jan 27 '16 at 13:13
*Of course they are clashing. That is problem I need to solve* Then maybe that should be the question in your OP and not 10 comments below it. — Drew Kennedy, Jan 27 '16 at 14:19

score 15 · Accepted Answer · answered Jul 15 '16 at 11:04

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

answered Jul 15 '16 at 11:04

Shimbala

163
1
5

Marten Brosch · Answer 2 · 2017-05-24T18:07:04.513

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

edited May 24 '17 at 18:07

answered Jan 17 '17 at 10:53

Marten Brosch

333
6
14

2

By far easiest solution. Watch the typo though inherit* – essepikker May 24 '17 at 14:52
Oh, you are right - i corrected it :) thanks for your hint – Marten Brosch May 24 '17 at 18:07

score 3 · Answer 3 · edited Mar 18 '16 at 18:45

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
}

edited Mar 18 '16 at 18:45

rdonuk

3,921
21
39

answered Mar 18 '16 at 17:43

style

31
6

Joe Kdw · Answer 4 · 2016-01-27T13:57:50.670

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

edited Jan 27 '16 at 13:57

answered Jan 27 '16 at 13:13

Joe Kdw

2,245
1
21
38

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 Jan 27 '16 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 Jan 27 '16 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 Jan 27 '16 at 14:01
try to remove these links first.
` ` to see if there's a conflict – Joe Kdw Jan 27 '16 at 14:03
I need those links for my mmenu. They are vital. – MJH Jan 27 '16 at 14:05
It does work when I don't include them. That is my problem. I know that there is a conflict. I want to know how to solve it. – MJH Jan 27 '16 at 14:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101782/discussion-between-herman-nz-and-rosa). – Joe Kdw Jan 27 '16 at 14:16

score 2 · Answer 5 · edited Jan 27 '16 at 14:27

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

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, Jan 27 '16 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](http://jsfiddle.net/uvwn1f5a/) — Chirag S Modi, Jan 27 '16 at 14:13
I saw youre fiddle, but there is only the modal there. Not a mmenu. Please see my updated question. — MJH, Feb 14 '16 at 08:32
can you create your fiddle and send me link so i can debug there? — Chirag S Modi, Feb 15 '16 at 06:38
here you go. [JSFiddle](http://jsfiddle.net/AhnJaeHee/okkf2bsr/15/). In the fiddle I have slightly different problems with them. You'll see. — MJH, Feb 15 '16 at 09:53
here is the [JSFiddle](http://jsfiddle.net/dg6fcw58/). updated fiddle. in this you haven't call `data-target` and `data-model` attribute and also there is `z-index` issue. — Chirag S Modi, Feb 16 '16 at 06:44
Your fiddle doesn't work. The first time I clicked **Menu** the modal opened. The second time Both opened and I couldn't close either of them. — MJH, Feb 16 '16 at 07:33

score 1 · Answer 6 · answered Jan 27 '16 at 13:15

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');

answered Jan 27 '16 at 13:15

Punit Gajjar

4,937
7
35
70

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 Jan 27 '16 at 13:32
1

try send us your css and js files. – Punit Gajjar Jan 27 '16 at 13:38

bootstrap modal and mmenu menu clashing

6 Answers6

Linked