实用的div弹出层

最新推荐文章于 2025-06-13 14:41:51 发布

最新推荐文章于 2025-06-13 14:41:51 发布 · 209 阅读

文章标签：

#javascript #div #html #popwindow #ViewUI

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

使用div实现的弹出层效果，带遮罩层和透明度效果

代码：

(function(){

if(window.popwindow)return;

var rootEl = null;

var maskel = null;

var winel = null;

window.popwindow = {

_init:function(){

rootEl = document.body;

rootEl.appendChild(div);

maskel = $('fill-mask');

winel = $('fill-window');

maskel.attachEvent("onclick",function(){

setStyle(maskel,{

display:'none'

});

setStyle(winel,{

display:'none'

});

show:function(cfg){

this._init();

var pos = getPos(cfg.width,cfg.height);

if(cfg.ajax){

toServer({

url:cfg.url,

param:cfg.param

});

}else{

winel.innerHTML = cfg.src;

}

setStyle(winel,{

left:(pos[0])+'px',

top:(pos[1])+'px',

width:cfg.width+'px',

height:cfg.height+'px',

display:''

});

var winSize = getWinSize();

setStyle(maskel,{

width:winSize[0]+'px',

height:winSize[1]+'px',

display:''

});

}

var $ = function(id){return document.getElementById(id)};

var div = document.createElement("<div>");

var strHTML = "";

strHTML += "<div id='fill-mask' oncontextmenu='return false;' onselectstart='return false;' style='position:absolute;z-index:10000;top:0;left:0;filter:alpha(opacity=50);background:#000'></div>";

strHTML += "<div id='fill-window' oncontextmenu='return false;' onselectstart='return false;' style='position:absolute;z-index:10001;'></div>";

div.innerHTML = strHTML;

var getPos = function(width,height){

var winSize = getWinSize();

var offWidth = winSize[0];

var offHeight = winSize[1];

var clientX = window.event.clientX+10;

var clientY = window.event.clientY+10;

if(clientX+width > offWidth){

clientX = clientX - width - 20;

}

if(clientY+height > offHeight){

clientY = clientY - height - 20;

}

return [clientX,clientY];

}

var getWinSize = function() {

return [Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth), Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)]

};

var setStyle = function(el,o){

for (var i in o)el.style[i] = o[i]

}

var toServer = function(obj){

var xhr = false;

if(window.ActiveXObject){

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}

xhr.open("POST",obj.url);