如何做出弹出菜单的效果,想了很久,
先从html写法上改进。
li#loginContainer>a#loginButton>span <!—表单注册的按钮--!>
div#loginBox>form#loginForm>fieldset <!—表单部分--!>
中心思想,就是把注册的按钮和表单写在一起。。。。
然后,在css上的写法
可以把#loginBox的位置写死,position:absolute。。。,而# loginButton因为需要全局自适应排版位置应该写成relative。#loginBox的z-index应该比# loginButton的值大,因为#loginBox要在堆叠在上层。
最后,写juery插件。
$(function(){
Varbutton = $(‘#loginButton’);
Var box = $(‘#loginBox’);
Var form = $(‘#loginForm’);
button.removeAttr(‘href’); //删除href属性
button.mouseup(function(){
box.toggle();
//toggle用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
//如何可见变成比可见,不可见变成可见
box.toggleClass(‘active’);
//如果存在(不存在)就删除(添加)一个类。
});
form.mouseup(function(){
return false; //form属性默认为false
});
//如果在loginButton 中有子元素,隐藏注册表单并去掉active类
$(this).mouseup(function(login){
If(!($(login..target).parent(#loginButton).length>0)){
button.removeClass(‘active’);
box.hide()
}
})
});
借鉴一下模态弹窗的代码
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache"/>
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache,must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 1001;
background: black;
opacity: 0.45;/*//指定对象的不透明度*/
/* filter: Alpha(Opacity=50);*/
}
.firstScan_main {
display: none;
position: absolute;
top: 10%;
left: 5%;
width: 88%;
/*height: 191.5px;*/
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
z-index: 1002;
overflow: auto;
border-radius: 20px;
color: #FFFFFF;
font-size: 12px;
padding: 0px;
}
.firstScan-content {
margin: 0px;
height: 185px;
}
.firstScan-left {
width: 40%;
float: left;
}
.firstScan-left>img {
padding-top: 15px;
padding-left: 15%;
}
.firstScan-right {
width: 57%;
float: left;
}
.firstScan-right-top {
color: #AEADAD;
font: bold 22px "微软雅黑";
width: 80%;
padding-left: 20%;
padding-top: 19%;
}
.firstScan-right-bottom {
border: 1px solid #ffffff;
background-color: #00A79D;
width: 66%;
height: 28px;
line-height: 28px;
border-radius: 6px;
text-align: center;
margin-left: 20%;
margin-top: 10px;
}
.firstScan-foot {
background-color: #00A79D;
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
clear: both;
border-radius: 1px;
}
.rescan_main {
display: none;
position: absolute;
top: 10%;
left: 5%;
width: 88%;
height: 202.5px;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
z-index: 1002;
overflow: auto;
border-radius: 20px;
color: #FFFFFF;
font-size: 12px;
padding: 0px;
}
.reScan-right-top {
color: #AEADAD;
font: bold 16px "微软雅黑";
width: 80%;
padding-left: 10%;
padding-top: 30px;
}
.firstScan-right-middle {
color: #AEADAD;
font: bolder 13px "微软雅黑";
width: 80%;
padding-left: 10%;
padding-top: 8px;
text-align: center;
}
</style>
<script language="javascript">
function openWindow(scanLog) {
if (scanLog == 1) {
document.getElementById('light1').style.display = 'block';
} else {
document.getElementById('light2').style.display = 'block';
}
document.getElementById('fade').style.display= 'block';
}
function closeWindow(id) {
document.getElementById(id).style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
</script>
</head>
<bodyοnlοad="openWindow(2)">
<p>可以根据自己要求修改css样式</p>
</body>
<!--未查验过的情况-->
<div id="light1"class="firstScan_main">
<div class="firstScan-content">
<!--左边的情况-->
<div class="firstScan-left">
<img src="images/pic1.png"/>
</div>
<!--右边的情况-->
<div class="firstScan-right">
<div class="firstScan-right-top">
弹窗效果<br/>练习1
</div>
<div class="firstScan-right-bottom"οnclick="closeWindow('light1')">点击后效果消失</div>
</div>
</div>
<div class="firstScan-foot">模态弹窗练习</div>
</div>
<!-- 已查验过的情况 -->
<div id="light2"class="rescan_main">
<div class="firstScan-content">
<div class="firstScan-left">
<img src="images/pic2.jpg" />
</div>
<div class="firstScan-right">
<div class="reScan-right-top">弹窗效果<br/>练习2</div>
<div class="firstScan-right-middle">
弹窗内容1:<br />
<spanid="showScanLog"> 弹窗内容2</span>
</div>
<div class="firstScan-right-bottom"οnclick="closeWindow('light2')">点击后效果消失</div>
</div>
</div>
<div class="firstScan-foot">模态弹窗练习</div>
</div>
<div id="fade"class="black_overlay"></div>
</html>