如何做出彈出菜單的效果，想了很久，
先從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>
<bodyonload="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"onclick="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"onclick="closeWindow('light2')">點擊後效果消失</div>
</div>
</div>
<div class="firstScan-foot">模態彈窗練習</div>
</div>
<div id="fade"class="black_overlay"></div>
</html>
