一、css+js簡單彈窗：
當鼠標放在上方登錄時，彈出下方黑色方框：
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <script type="text/javascript"></script> <style> .class_dl a{ width: 27px; position: absolute; top: 0px; right: 28px; color: #787878; font-size: 10px; text-decoration: none; } .class_dl{ width: 20px; height:9px; right: -545px; position: relative; top: 20px; }
/*隱藏文本框的設置*/ #inform{ position: absolute; top: 21px; width: 160px;
height: 194px;
z-index: 10; background-color: #2b2b2b; /* box-shadow:0px 0px 0px #000; 外陰影*/ display: none; list-style-position:inside; margin-left: -100px; border-radius:4px; } #inform ul li{ list-style-type: none; height: 21px; } .tan1,.tan2,.tan3,.tan4,.tan5{ width: 17px; height: 17px; } .tan5{ background: url(wangyiyun/img/toplist.png) no-repeat 0px 0px; width: 17px; height: 17px; position: relative; top: 3px; left: -24px; } .tan1{ background: url(wangyiyun/img/toplist.png) no-repeat -21px -20px; position: relative; top: 2px; left: -24px; } .tan2{ background: url(wangyiyun/img/toplist.png) no-repeat -21px -41px; position: relative; top: 3px; left: -22px; } .tan3{ background: url(wangyiyun/img/toplist.png) no-repeat 0px -21px; position: relative; top: 4px; left: -23px; } .tan4{ background: url(wangyiyun/img/toplist.png) no-repeat 0px -42px; position: relative; top: 3px; left: -25px; } #inform a{ color: #cccccc; font-size: 10px; position: relative; top: -17px; left: 10px; } #inform hr{ width: 150px; margin-left: -36px; background-color:#232323; height:1px; border:none; } </style> </head> <body> <div class="class_dl"> //彈出的內容
// 加事件，鼠標移到上面時調用showInform內的方法，鼠標離開彈出頁面時調用hiddenInform內的方法 <a class="claass_divdian" href="#" onMouseOver="showInform()" onMouseOut="hiddenInform()" >登錄</a>
// 加事件，鼠標移到上面時調用showInform內的方法---鼠標離開彈出頁面時調用hiddenInform1內的方法 <div id="inform" onMouseOver="showInform()" onMouseOut="hiddenInform1()"> <ul> <li> <div class="tan5"></div> <a href="#" class="tana1"> 手機號登錄 </a> </li> <hr> <li> <div class="tan1"></div> <a href="#" class="tana1"> 微信登錄 </a> </li> <hr> <li> <div class="tan2"></div> <a href="#" class="tana1"> QQ登錄 </a> </li> <hr> <li> <div class="tan3"></div> <a href="#" class="tana1"> 新浪微博登錄 </a> </li> <hr> <li> <div class="tan4"></div> <a href="#" class="tana1"> 網易郵箱帳號登錄 </a> </li> </ul> </div> </div> </body> </html> <script> //隱藏彈窗 function showInform(){ document.getElementById("inform").style.display='block'; //document.getElementById("inform").css("display","block"); } // 隱藏懸浮層 function hiddenInform(event){ var informDiv = document.getElementById('inform'); var event = evt || window.Event; var x=evt.clientX; var y=evt.clientY; alert(x); var divx1 = informDiv.offsetLeft; var divy1 = informDiv.offsetTop; if(x > divx1){ document.getElementById('inform').style.display='none'; } var divx2 = informDiv.offsetLeft + informDiv.offsetWidth; var divy2 = informDiv.offsetTop + informDiv.offsetHeight; if( x < divx1 || x > divx2 || y < divy1 || y > divy2){ document.getElementById('inform').style.display='none'; } } function hiddenInform1(){ document.getElementById('inform').style.display='none'; } </script>
toplist.png：
二、css+js彈出簡單登錄框
當鼠標點擊登錄時，彈出登錄框頁面進行操作：
操作前效果：
操作后效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script type="text/javascript"></script>
<style>
/*設置文本框的寬高和邊框的寬度及顏色*/
.class_4{
width: 980px;
height: 500px;
background-color: #fff;
border: 1px solid #d3d3d3;
margin: auto;
}
/*立即登錄背景圖*/
.neikuang{
width: 807px;
height: 270px;
margin: 0 auto;
background:url(wangyiyun/img/youneirong/mymusic.png) no-repeat 0px 0px;
position: relative;
top: 103px;
}
/*立即登錄背景圖*/
.neikuang1{
width: 173px;
height: 29px;
padding-top: 104px;
margin: 0 auto;
background:url(wangyiyun/img/youneirong/mymusic.png) no-repeat -332px -265px;
position: relative;
top: 197px;
left: 164px;
}
/*立即登錄鼠標移到到上方時的圖片*/
.neikuang1:hover{
background:url(wangyiyun/img/youneirong/mymusic.png) no-repeat 1px -273px;
width: 173px;
height: 29px;
}
/*彈出框*/
#tanchuang{
position: fixed;
top: 140px;
left: 415px;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#FFFFFF;
border-radius:6px;
box-shadow:0px 5px 16px #000;
}
.tanchuang1{
width: 530px;
height: 40px;
border: 1px solid #ccc;
background: #2d2d2d;
border-radius:4px;
}
.denglu_1{
float: left;
position: relative;
top: 10px;
left: 16px;
}
.denglu_1 b{
color: #ffffff;
}
/* 關閉時的圖片設置*/
.denglu_2{
float: right;
position: relative;
width: 12px;
height: 13px;
background: url(wangyiyun/img/youneirong/layer.png) no-repeat 0px -93px;
top: 14px;
left: -19px;
}
.denglu_2 span{
color: #888888;
}
/* 內置圖片設置*/
.tanchuang2{
width: 299px;
height: 208px;
float: left;
border-right: 1px dashed #ccc;
margin-top: 41px;
background: url(wangyiyun/img/youneirong/platform.png) no-repeat 45px 0px;
}
.tanchuang_input{
width: 225px;
height: 30px;
}
.tanchuangin{
background: #418fd9;
position: relative;
top: 130px;
left:33px;
text-align: center;
border-radius:3px;
border: 1px solid #3984ce;
}
.tanchuanginput{
background: #f6f6f6;
position: relative;
top: 141px;
left:33px;
border-radius:3px;
text-align: center;
border: 1px solid #c4c4c4;
}
.tanchuang3{
width: 228px;
height: 208px;
float: left;
margin-top: 40px;
}
.tanchuangnei{
text-decoration: none;
position: relative;
top: -39px;
left: 50px;
color: #333333;
}
.tanchuang3 li{
margin-top: -8px;
list-style-type: none;
font-size: 13px;
}
/* 設置圖標的背景圖及位置*/
.li1,.li3,.li2,.li4{
width: 41px;
height: 47px;
position: relative;
top: -10px;
left: -13px;
}
.li1{
background: url(wangyiyun/img/logo.png) no-repeat -148px -664px;
}
.li2{
background: url(wangyiyun/img/logo.png) no-repeat -188px -664px;
}
.li3{
background: url(wangyiyun/img/logo.png) no-repeat -229px -664px;
}
.li4{
background: url(wangyiyun/img/logo.png) no-repeat -269px -664px;
}
</style>
</head>
<body>
<div class="class_4">
<div class="neikuang">
<div class="neikuang1" onclick="showPopup(528,325)"></div>
</div>
</div>
<div id="tanchuang">
<div class="tanchuang1">
<div class="denglu_1">
<b>登錄</b>
</div>
<div class="denglu_2" onclick="hidePopup()">
</div>
</div>
<div class="tanchuang2">
<a href="#"><input type="button" class="tanchuang_input tanchuangin" value="手機號登錄"></a>
<a href="#"><input type="button" class="tanchuang_input tanchuanginput" value="注冊"></a>
</div>
<div class="tanchuang3">
<ul>
<li class="nnli">
<div class="li1 neili"></div>
<a href="#" class="tanchuangnei">微信登錄</a>
</li>
<li>
<div class="li2 neili"></div>
<a href="#" class="tanchuangnei">QQ登錄</a>
</li>
<li>
<div class="li3 neili"></div>
<a href="#" class="tanchuangnei">微博登錄</a>
</li>
<li>
<div class="li4 neili"></div>
<a href="#" class="tanchuangnei">網易郵箱賬號登錄</a>
</li>
</ul>
</div>
</div>
</body>
</html>
<script>
var baseText = null;
// 獲取點擊事件的高寬
function showPopup(w,h){
// 獲取操作對象的id
var popUp = document.getElementById("tanchuang");
// 設置獲取對象的上距離
popUp.style.top = "140px";
// 設置獲取對象的左距離
popUp.style.left = "415px";
// 設置獲取對象的寬度(像素)
popUp.style.width = w + "px";
// 設置獲取對象的高度(像素)
popUp.style.height = h + "px";
// 設置獲是否顯示對象
popUp.style.visibility = "visible";
}
//創建一個刪除方法
function hidePopup(){
// 獲取操作對象的id
var popUp = document.getElementById("tanchuang");
// 設置對象隱藏
popUp.style.visibility = "hidden";
}
</script>
mymusic.png：
layer.png：
platform.png：
logo.png：
