弹出层总结 ：实现原理————>
透明遮罩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];
}
}
×
代码截图------------------------------------------------
转载请注明原文地址: https://ju.6miu.com/read-675061.html
