弹出层总结  和 &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:0 auto;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 0px 0px;

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

return obj.currentStyle[attr];

}else {

return getComputedStyle(obj,false)[attr];

}

}

       

   

    

   

   

    ×

   

    

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