弹出层总结  和 &n…

弹出层总结 ：实现原理————>

透明遮罩width:100%;  height:100%;fixed固定在页面

中间的 div ：通过 var clientHeight =document.documentElement.clientHeight;   和    

var clientWidth = document.documentElement.clientWidth;

得到页面可视区域宽高，从而设置fixed.

----------------------------------------------------------------------------------------------

给一个div，width 和 height 和 position:fixed;   但是不给他top或者 left 或者 right 或者 bottom 值，

那么 该div 就“不会显示”（其实是显示再正常页面以下，只要缩小页面内容就能看见），，，呵呵

而  同为定位的absolute 和 relative 就不会

so  可以利用fixed 这一个特性，，写 弹出层

代码-----------------------------------------------------

#box {

width:980px;height:800px;margin:0auto;border:1px solid #f00;

text-align:center;padding-top:300px;

}

#tanchu1 {

width:100%;height:100%;background:#000;

filter:alpha(opacity:50);opacity:0.5;

position:fixed;top:0px;left:0px;

display:none;

}

#tanchu2{width:400px;height:250px;background:#f00;position:fixed;}

#close {

background:#0f0;float:right;

margin:5px 5px 0px0px;

cursor:pointer;

}

  

window.onload = function (){

var button =document.getElementByIdx_x_x("input");

var tanchu1 =document.getElementByIdx_x_x("tanchu1");

var close =document.getElementByIdx_x_x("close");

button.onclick = function (){

display();

}

tanchu1.onclick = function (){

hidden();

}

close.onclick = function (){

hidden();

}

}

function display(){

var clientHeight =document.documentElement.clientHeight;

var clientWidth =document.documentElement.clientWidth;

var tanchu2 =document.getElementByIdx_x_x("tanchu2");

var tanchu2Width =getstyle(tanchu2,"width");

var tanchu2Height =getstyle(tanchu2,"height");

tanchu1.style.display ="block";

var s = /\d+/;

var tanchu2Width =tanchu2Width.match(s);

var tanchu2Height =tanchu2Height.match(s);

var tanchu2Top =(clientHeight-tanchu2Height)/2+"px";

var tanchu2Left =(clientWidth-tanchu2Width)/2+"px";

tanchu2.style.top =tanchu2Top;

tanchu2.style.left =tanchu2Left;

}

function hidden(){

tanchu1.style.display ="";

tanchu2.style.top ="";

tanchu2.style.left ="";

}

function getstyle(obj,attr) {通过这个方法，获取对象的样式

if(obj.currentStyle){

returnobj.currentStyle[attr];

}else {

returngetComputedStyle(obj,false)[attr];

}

}

      

  

   

  

  

   ×

  

   

代码截图------------------------------------------------