js弹出层成效
日期：2014-05-16 浏览次数：20471 次
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
? <html>
?<head>
?<title></title>
?<!-- 样式 -->
?<style type="text/css">
?/* div的 position 为 absolute 就都取绝对定位，所有的div就会叠在一起 */
?/* 页面加载的时候遮罩div 和 消息 div 不显示，点击显示后再显示 */
?/* 由于用第二个div来挡住页面所以第二个div的宽度和高度都是100% */
?#divMain
?{
?margin:0 auto;
?z-index:1;//设置div层所处的位置
?position:absolute;
?}
?#divLayer
?{
?width:100%;
?height:100%;
?background-color:#eee;
?filter:alpha(opacity=90);/*设置半透明效果*/
?opacity:0.9;/*透明度*/
?z-index:2;/*设置div层所处的位置*/
?position:absolute;
?display:none;
?cursor:not-allowed;
?}
?
?
?#divMsg
?{
?margin-top:10%;
?width:240px;
?height:100px;
?line-height:10px;
?text-align:center;
?margin-left:40%;
?position:absolute;
?display:none;
?background-color:white;
?border:2px solid yellow;
?z-index:3;/*设置div层所处的位置*/
?}
?.btn
?{
?border:4px solid yellow;
?font-family:微软雅黑;
?font-size:12px;
?}
?</style>
?<!-- 控制脚本 -->
?<script language="javascript">
?function showMsg(){
?/* 得到遮罩div && 消息div */
?var _divLayer=document.getElementById("divLayer");
?var _divMsg=document.getElementById("divMsg");
?_divLayer.style.display="block";
?_divMsg.style.display="block";
?}
?
?
?function logout(){
?var _divLayer=document.getElementById("divLayer");
?var _divMsg=document.getElementById("divMsg");
?_divLayer.style.display="none";
?_divMsg.style.display="none";
?alert("login successfull!");
?}
?</script>
?</head>
?<body>
?<!-- 遮罩用的div -->
?<div id="divLayer">
?</div>
?<!-- 消息div
?<div id="divMsg">
??? <div style="margin-top:7px;">username:<input type="text" id="userName" maxLength="16"/></div>
??? <div style="margin-top:6px;">userpass:<input type="password" id="userPass" maxLength="16"/></div>
??? <div style="margin-top:8px;">
??? ??? <input type="button" value="login" onclick="logout();"/>
??? ??? <input type="button" value="exit" onclick="logout();"/>
??? </div>
?</div>
?-->
?
?<div id="divMsg">
??? <div style="margin-top:47px;"></div>
??? <span>文件载入中，请等待....</span>
?</div>
?
?
?<!-- 正常的div -->
?<div id="divMain">
?<input type="button" value=" 登 录 " id="btnLogin" class="btn" onclick="showMsg();"/>
?</div>
</body>
</html>
