javascript - Bootstrap 模式和 mmenu 菜单冲突-6ren

javascript - Bootstrap 模式和 mmenu 菜单冲突

转载作者：数据小太阳更新时间：2023-10-29 05:39:54

25

4

我正在使用 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 工具提示标题

文章推荐： ios - FIRApp 链接器错误 ["_OBJC_CLASS_$_FIRApp"]

java - Hadoop 2.6.x 和 Amazon AWS SDK Library 冲突 http-core 冲突
我的工作是将每条记录写入 Hadoop 映射中的 DynamoDB。我无法使用具有 httpclient-4.2.5.jar 和 httpcore-4.2.5.jar 的 Hadoop 2.6 运行
for循环中断中的Javascript切换；冲突
我在 JavaScript 中嵌套了循环开关，例如: for (var i = 0; i < checkBoxIds.length; i++) { if ($('#' + checkB
SVN重命名分支中的文件夹，冲突
我有一个文件夹被重命名的分支。现在我正在尝试合并从主干到这个分支的更改，但是在主干中修改的文件仍然在原始文件夹名称下，因此 svn 引发了树冲突。我该如何解决这个问题？该文件夹已使用 svn ren
Jquery插件占用相同的函数名 -> 冲突
我在使用 jquery 暴露插件和 Masked 输入插件时遇到了问题。问题是它们都占用 $.mask 函数，从而导致冲突。但我非常需要这两个插件一起工作。我会将其中一个中的 $.mask 重命名为.
CSS 冲突
我正在尝试为我所有的 INPUT 元素做一个简单的 :focus 效果，就像这样: INPUT:focus { border-color: orange; } 这很好用，直到我将这段 CSS 添加到样
Javascript 冲突
我是 javascript 的新手。在 wordpress 上工作，我在自定义 js 中为我的主题输入了以下函数: document.getElementsByName("empty_cart")[
javascript 冲突
为什么有些 javascript 会与其他的发生冲突？我的意思是我一直在为图片库使用 javascript 代码，然后尝试在 jquery 中获取文本水印。为什么在使用 jquery 之后，画廊完全消
已知输入的 MD5 冲突
是否可以根据已知的输入值创建 MD5 碰撞？所以例如我有输入字符串 abc与 MD5 900150983cd24fb0d6963f7d28e17f72 . 现在我想将字节添加到字符串 def获得相同
两个文件中的 Javascript 冲突
我在我的项目中使用原型(prototype): NodeParser.prototype.getChildren = function(parentContainer) { return fl
Git应该显示没有 merge 冲突
根据我对 merge 冲突的理解，当两个人更改了同一文件和/或修改了该文件中的同一行时，就会发生 merge 冲突。所以当我做一个 git pull origin master 我期望 merge 冲
jquery - iScroll 冲突
iPad 上 Mobile Safari 中的 HTML5 模板。带 iScroll 的 Div 工作正常。 if/else 语句中还包含一个 jQuery 函数。该函数测试用户是否在 iScroll
Jquery-Mootools 冲突
我一直在尝试使 2 个脚本(1 个 mootol 和 1 个 jquery)在同一页面上工作，但没有成功。我一直在研究许多论坛等，但我仍然无法使这两个脚本同时工作。这就是它在我的标题中的样子: /w
克隆后的 jQuery 冲突
我想克隆带标题的问号。一切正常，但是当我将鼠标悬停在新问号上时，第一个问号上会出现工具提示。有什么想法吗？我正在使用 jQuery 和醉酒的工具提示。 Demo here click here
jquery - 如何解决jQuery和mooTools之间的$冲突？
好吧，我已经在一个 friend 的网站上工作了一段时间了。我的编码技能......值得怀疑，而且我遇到了很多问题。目前我网站上的 jQuery 停止工作了，我找不到原因，并且我已尽一切努力让它工作
全局变量的类型 C 冲突
我想使用一个文件来保存所有#define 和常量:示例 #ifndef CONSTANTS_H_ #define CONSTANTS_H_ #include //OVERALL DEFS
php - JavaScript 冲突？
我在我的表单中的所有 HTML 下都有一些验证码，这似乎阻止了我的复选框验证码的工作，一旦我在我的 HTML 下的代码周围添加/* */(使其不活动)，我就得出了这个结论) 复选框验证代码开始正常工作
Javascript/JQuery 冲突
我是新手。我的页面上有两个 javascript/jquery。如果我使用第一个脚本，第二个脚本将不起作用。如果我删除第一个脚本，第二个脚本就可以正常工作。我不知道如何解决这个问题。我知道有一个“无冲
冲突 Bison 解析器
我是 Bison 新手，在处理 Shift/Reduce 冲突时遇到了麻烦... 我正在为C语言编写语法规则:ID是标识变量的标记，我编写此规则是为了确保即使将标识符写在括号中，也可以考虑它。 id
android - LibGdx 冲突
我目前正在使用 LibGdx 开发我的第一个 Android 游戏项目。这是一款 2D 迷宫游戏，您可以使用触摸输入从其中一个入口到其中一个导出“画出”一条线。世界本身是一个 TiledMap，目前仅
javascript表单验证和表单 Action 冲突
我正在尝试通过 javascript 完成表单验证，并在 #form# 标记中放置一个要执行的 .py 文件操作。但问题是，当我提交数据后，它不会重定向到 .py 操作。所以我摆脱了 preventd

首页

博学

6Ren·AI

商城

javascript - Bootstrap 模式和 mmenu 菜单冲突