个人中心
gpt4 book ai didi

javascript - Bootstrap 模式和 mmenu 菜单冲突

转载 作者：数据小太阳 更新时间：2023-10-29 05:39:54 25 4
gpt4 key购买 nike

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

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

我尝试编写一个具有相同模态和 mmenu 的页面，通过单击 page 上的按钮打开模态，而不是在 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.

最佳答案

代替

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

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

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

关于javascript - Bootstrap 模式和 mmenu 菜单冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35038146/

25 4 0
文章推荐： javascript - jQuery: 错误 - matchExpr[type].exec 不是一个函数
文章推荐： javascript - 无法更改 Bootstrap 工具提示标题
文章推荐： javascript - 查找两个数组是否在数组中重复，然后选择它们
文章推荐： ios - FIRApp 链接器错误 ["_OBJC_CLASS_$_FIRApp"]