i我尝试编写一个具有相同模态和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">×</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
取消z索引：1个在此文件的第69行中的1个“ css/jquery.mmenu.all.css”
在您的主CSS文件中以自动
的Z索引
.mm-slideout { z-index:auto;}
inshand在jquery.mmenu.all.css中更改某些内容，您可以将以下内容包含在您自己的CSS文件中：body.modal-open .mm-slideout{
z-index:inherit;
}
此文件的第69行中的第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
}
您的代码很好，当按钮关闭时，模态可以启动和关闭。我已经测试过。问题在于您的
**bootstrap version**我看到您使用bootstrap.css而不是min.css。如果您觉得自己具有快速连接以及托管，那将是没有问题的。否则，与
min.一起使用。
v3.1.0 (min.js/min.css)和
jQuery v2.1.1Http：//jsfiddle.net/okkf2bsr
我以前有同样的问题。 所以我做了什么。
我在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 5在第9.3版中遇到了相同的问题。 模态打开时，菜单会同时打开，并且模态被禁用。它留在覆盖层下，实际上变得无法访问。我还使用了z索引，并且存在相同的问题。