我正在为我的网站制作侧边栏。
- 当侧边栏出现(点击showRight)时,我希望禁用背景内容,以便用户不能在菜单外执行任何操作。
- 当用户点击背景时,侧边栏将消失,然后他们将再次访问背景内容。目前,我在点击隐藏按钮时关闭侧边栏。
有人能帮帮我吗?
这是我的代码:
<html>
<head>
<style>
.cbp-spmenu {
background: #fff;
position: fixed;
}
.cbp-spmenu-vertical {
width: 400px;
height: 100%;
top: 0;
z-index: 1000;
}
.cbp-spmenu-right {
right: -400px;
}
.cbp-spmenu, #cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div id="menu">
<span class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s1">
<h4>Avinash</h4>
</span>
</div>
<div id="content">
<section id="about">
<button id="showRight">Show</button>
<button id="showRight2">Hide</button>
</section>
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s1' ),
showRight = document.getElementById( 'showRight' ),
showRight2 = document.getElementById( 'showRight2' ),
content = document.getElementById( 'avi' ),
menu = document.getElementById( 'menu' ),
body = document.body;
showRight.onclick = function() {
classie.add(this,"active");
menuRight.style.right = '0px';
content.style.opacity = '0.5';
body.style.display = 'block';
};
showRight2.onclick = function() {
if (classie.has(showRight,"active")) {
menuRight.style.right = '-400px';
classie.remove(showRight,"active");
content.style.opacity = '1';
}
};
</script>
</div>
</body>
</html>
z-index:1000
,我通过JavaScript将div overlay
的z-index
更改为999
,但现在侧边栏没有出现。overlay.onclick = function(){ overlay.style.z-index = "999"; }
但是当我删除 onclick 的 JavaScript 函数时,它正常显示。 - tenstormavi