bootstrap 模式和 mmenu 菜单冲突

Question

我正在使用 bootstrap 和 mmenu 库设计网站。我正在尝试添加一个 bootstrap 模式，当单击 mmenu 中的按钮时 打开该模式。

单击关闭、按 ESC 键并在模态框外单击时，模态框不会关闭。

我尝试编写一个具有相同模式和 mmenu 的页面，通过单击页面上的按钮打开模式，而不是在 mmenu 中，两者都工作正常。

我尝试了单击 mmenu 内的按钮时出现的 mmenu 弹出窗口，但遇到了同样的问题。

我也很乐意得到一个通用的答案；这两个库可能出现问题的地方，以及如何解决它们。或者如何调试代码，以便我自己找出解决方案。我尝试检查 Chrome 中的控制台，但那里没有错误。我不知道如何进一步检查。

我添加了我的代码，以防熟悉 mmenu 和 bootstrap 库的人有具体的答案。谢谢大家的努力。

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

Here is the fiddle.

Answer 1

您的代码没问题，当单击关闭按钮时模态可以启动和关闭。我已经测试过了。问题出在您的 **bootstrap version** 上。

我看到你使用 bootstrap.css 而不是 min.css。如果您觉得自己的连接速度和托管速度都很快，那就没有问题。否则，使用 min.

顺便说一句，我使用 v3.1.0 (min.js/min.css) 和 jQuery v2.1.1

Answer 2

我之前也遇到过同样的问题。所以我做了什么。

我在jquery中添加以下代码。

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

然后单击按钮后 jquery 您可以关闭或打开模式。像这样

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

});

隐藏模态

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

Answer 3

您的代码运行良好，我已经测试过了。下面是要检查的Fiddle。

<!-- 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"
                }
            });                                         
        });

工作模式如下：http://jsfiddle.net/okkf2bsr

Answer 4

删除此文件第 69 行中的 z-index:1 "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
}

Answer 5

改为

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

将主 css 文件中的 z-index 设置为自动

.mm-slideout { z-index:auto;}

Answer 6

您可以在自己的 css-files 中包含以下内容，而不是更改 jquery.mmenu.all.css 中的内容：

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

bootstrap 模式和 mmenu 菜单冲突

bootstrap modal and mmenu menu clashing

javascript

jquery

css

twitter-bootstrap

mmenu