MJH*_*MJH 5 javascript css jquery twitter-bootstrap mmenu
我正在使用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">×</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>
小智 15
代替
删除此文件"CSS/jquery.mmenu.all.css"第69行中的z-index:1
将主css文件中的z-index设置为auto
.mm-slideout { z-index:auto;}
您可以在自己的css文件中包含以下内容,而不是在jquery.mmenu.all.css中更改内容:
body.modal-open .mm-slideout{
z-index:inherit;
}
| 归档时间： |
|
| 查看次数： |
4247 次 |
| 最近记录： |