弹出层，半透明蒙层提示的实现办法

    这些天一直在做弹出层的设计，原理在明白之后很好下手！主要技术要点就是：

    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>

带蒙版：

JavaScript

< 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>

具体就不解释了，注释很充分，大家可以自己运行一下！

 

转载于:https://www.cnblogs.com/long_/archive/2010/09/08/1821751.html