这些天一直在做弹出层的设计,原理在明白之后很好下手!主要技术要点就是:
1.弹出层的绝对定位,这主要有跨浏览器鼠标位置的获取技术,CSS:z-index定位。
2.动态控制弹出Div的各种属性。
3.弹出窗口位置的计算,主要是在有蒙版层的里面,居中的问题。
4.各种弹出效果和动画。
先给出普通弹出层的代码:
1 <script language="javascript" type="text/javascript">
2 $(function(){
3 $("#ele1").click(function(ev){
4 var evs= ev || window.event;
5 var XYposition=mousePosition(evs);
6 var X=XYposition.x;
7 var Y=XYposition.y;
8 $('#blk1').css("opacity","0").css("left",''+X+'px').css("top",''+Y+'px');
9 $('#blk1').animate({width:"200px",height:"200px",opacity:"1"},3000);
10 })
11 $("#close1").click(function(){
12 $('#blk1').stop().animate({width:"0px",height:"0px",opacity:"0",left:"0px",top:"0px"},300);
13 })
14
15 });
16
17 //鼠标位置
18 function mousePosition(ev){
19 if(ev.pageX || ev.pageY){
20 return {x:ev.pageX, y:ev.pageY};
21 }
22 return {
23 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
24 y:ev.clientY + document.body.scrollTop - document.body.clientTop
25 };
26 }
27
28 </script>
带蒙版:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script language="javascript" type="text/javascript">
$(function(){
$("#ele1").click(function(ev){
//蒙版层
var CoverAll=getViewportInfo();
var W=CoverAll.w;
var H=CoverAll.h;
$('#all').css("opacity","0.3").css("width",''+W+'px').css("height",''+H+'px');
//弹出层
var X=(W-300)/2;
var Y=(H-200)/2;
$('#blk1').css("opacity","0").css("left",''+W/2+'').css("top",''+H/2+'');
$('#blk1').animate({width:"300px",height:"200px",left:''+X+'',top:''+Y+'',opacity:"1"},3000,function(){$('#hideDiv').show();});
})
//关闭按钮
$('#close1').click(function(){
$('#blk1').stop().animate({width:"0px",height:"0px",opacity:"0"},300);
$('#all').stop().animate({width:"0px",height:"0px",opacity:"0",left:"0px",top:"0px"},100);
})
});
//蒙版的尺寸
function getViewportInfo()
{
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
return {w:w,h:h};
};
</script>
具体就不解释了,注释很充分,大家可以自己运行一下!