Question

我正在使用bootstrap和mmenu库设计网站。我正在尝试添加一个在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>
    <!-- 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.

Answer 1

代替

删除此文件第69行中的z-index：1＆＃34; CSS / jquery.mmenu.all.css＆＃34;

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

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

Answer 2

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

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

Answer 3

删除此文件“CSS / jquery.mmenu.all.css”第69行中的z-index:1

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

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

我看到你使用bootstrap.css而不是min.css。如果你觉得你有快速连接和托管，那就没问题了。否则，请与min一起使用。

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

Answer 5

您的代码运行正常，我已经对此进行了测试。贝娄是要检查的小提琴。

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

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

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

bootstrap模态和mmenu菜单冲突

6 个答案: