All geek questions in one place

Bootstrap modal and menus clash menu

I am designing a site using bootstrap and mmenu libraries. I am trying to add bootstrap modal that opens when a button is clicked in mmenu .

The modal does not close when you press the close button, press ESC and press outside the modal.

I tried to write a page with the same modal and mmenu, where the modal opens by clicking a button on the page , not in mmenu, and both worked fine.

I tried the mmenu popup that appears when a button is pressed inside mmenu but has the same problem.

I would be pleased with the general answer; Where problems may arise with these two libraries, and how to get around them. Or how to debug the code so that I can solve the problem myself. I tried to check the console in Chrome, but there were no errors. I do not know how to check this.

I added my code in case someone familiar with the mmenu and bootstrap libraries gets a specific answer. Thank you all for your efforts.

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

+4
source share
6 answers

instead

Delete z-index: 1 on line 69 of this file "CSS / jquery.mmenu.all.css"

set z-index in your main css file to automatically

 .mm-slideout { z-index:auto;}
+10
source

Instead of changing something in jquery.mmenu.all.css, you can include the following in your own css files:

 body.modal-open .mm-slideout{ z-index:inherit; }
+4
source

Delete z-index:1 on line 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 }
+3
source

your codes are fine, and modal ones can start and close when you click a button. I have already tested. the problem is in your **bootstrap version** .

I see that you are using bootstrap.css and not min.css. If you feel that you have a high-speed connection, as well as your hosting, there will be no problems. otherwise use min .

By the way, I am using v3.1.0 (min.js/min.css) and jQuery v2.1.1

+1
source

Your code works fine, I checked this. Below is the script.

 <!-- 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 a work mod: http://jsfiddle.net/okkf2bsr

+1
source
I used to have the same problem. so what i did.

Add the jquery code below.

  // Call Business logo modal. $('#myModal_business').modal({ backdrop: 'static', keyboard: false, show: false });

then after clicking jQuery you can close or open modal. like this

 $(".buttonclass").click( function() { $('#myModal_business').modal('show'); });

To hide the modal

 $('#myModal_business').modal('hide');
0
source

Source: https://habr.com/ru/post/946390/

More articles:


All Articles