javascript - bootstrap modal and mmenu menu clashing -
i'm designing site using bootstrap , mmenu libraries. i'm trying add bootstrap modal opens when clicking button in mmenu.
the modal doesn't close when clicking close, pressing esc , clicking outside modal.
i tried writing page same modal , mmenu, modal opens clicking button on page, not in mmenu, , both worked fine.
i tried mmenu popup appears when button inside mmenu clicked, had same problem.
i'd happy generic answer well; problems these 2 libraries can arise, , how around them. or how debug code can figure out solution myself. tried checking console in chrome there no errors there. don't know how check further.
i added code in case familiar mmenu , bootstrap libraries has specific answer. thank 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>
instead
remove z-index:1 in row 69 of file "css/jquery.mmenu.all.css"
set z-index in main css file auto
.mm-slideout { z-index:auto;} 
Comments
Post a Comment