简易的javascript遮罩层弹框,支持ie(7~10),ff,goole

原创 2013年12月03日 22:58:28
// JavaScript Document
/**
 * libo/2013/12/03
 * 简易可移动遮罩层
 */
var pop = {
bodyDiv    : '',
quyuheight : '',
quyuwidth  : '',
boxDivTop  : '',
boxDivleft : '',
hidenWidth : 450,
hidenHeight: 350,
title      : ' 温馨提示',
data       : 'ffd',
setBody : function(){
pop.bodyDiv   = document.createElement('div');
pop.bodyDiv.setAttribute('id','bgDiv'); 
pop.bodyDiv.style.position   = "absolute"; 
pop.bodyDiv.style.top        = "0"; 
pop.bodyDiv.style.background = "#000000"; 
pop.bodyDiv.style.opacity    = "0.4"; 
pop.bodyDiv.style.filter     = "alpha(opacity=30)"; 
pop.bodyDiv.style.left       = "0"; 
//可见区域宽度
pop.quyuwidth  = Math.max(document.documentElement.clientWidth, document.body.clientWidth); 
//可见区域高度
pop.quyuheight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
pop.bodyDiv.style.width      = pop.quyuwidth + "px"; 
pop.bodyDiv.style.height     = pop.quyuheight + "px"; 
pop.bodyDiv.style.zIndex     = "10000"; 
document.body.appendChild(pop.bodyDiv); 
},
//遮罩层创建
creatbox : function(){
var boxDiv =  document.createElement('div');
boxDiv.setAttribute('id','boxDiv'); 
boxDiv.style.position   = "absolute"; 
boxDiv.style.zIndex     = "10100"; 
boxDiv.style.background = "#fff"; 
boxDiv.style.border     = "5px solid #333333";
boxDiv.style.height     = pop.hidenHeight + 'px';
boxDiv.style.width      = pop.hidenWidth + 'px';
boxDiv.innerHTML = 
"<div id='boxTop' style='width:100%;height:30px;line-height:30px;border-bottom:1px solid #999999;background-color:#cccccc;'>"+
"<ul>"+
"<li style='height:30px;line-height:35px;width:80%;text-align:left;font-size:12px;color:#000000;cursor:move;float:left;'>"+pop.title+"</li>"+
"<li style='height:30px;line-height:35px;width:19%;text-align:right;float:left;'>"+
"<a href='javascript:;' style='color:red;font-size:12px;text-decoration:none' onclick='pop.colose()'>关闭</a>"+
"</li></ul>"+
"</div>"+
"<div id='boxCenter' style='width:100%;margin-top:5px;font-size:12px;height:auto;'>"+ pop.data +"</div>";
//返回当前屏幕高度(分辨率值) 
var pingmu = window.screen.height;
if (pingmu < pop.quyuheight) {
pop.boxDivTop = (pingmu - pop.hidenHeight)/3 + 'px';
} else {
    pop.boxDivTop = (pingmu - pop.hidenHeight)/3 + 'px';
}
pop.boxDivleft    = (pop.quyuwidth - pop.hidenWidth)/2;
boxDiv.style.left =  pop.boxDivleft + 'px'; 
boxDiv.style.top  = pop.boxDivTop; 

document.body.appendChild(boxDiv);
},
//Y坐标滚动条事件动作,保持遮罩层在中央
scrolled : function(){
var topScroll  = '';
var topTmp    = parseInt(pop.boxDivTop);
if (document.documentElement && document.documentElement.scrollTop) { 
topScroll = parseInt(document.documentElement.scrollTop); 
} else if (document.body) { 
topScroll = parseInt(document.body.scrollTop); 

document.getElementById('boxDiv').style.top = (topTmp + topScroll) + 'px';
},
//绑定滚动条事件
bindScroll : function(){
if (document.all) { 
window.attachEvent('onscroll', pop.scrolled);
} else { 
window.addEventListener('scroll', pop.scrolled);
}
},
lt : function () {
return {
left : document.documentElement.scrollLeft ||document.body.scrollLeft, 
top :  document.documentElement.scrollTop || document.body.scrollTop
};
},
//弹出框移动事件
moved:function(o, mvObj){
var lt = pop.lt(), d = document;
if (typeof o == 'string') {
o = document.getElementById(o);
}
if (typeof mvObj == 'string') {
mvObj = document.getElementById(mvObj);
}
o.orig_x = parseInt(o.style.left) - lt.left;
o.orig_y = parseInt(o.style.top) - lt.top;
mvObj.onmousedown = function () {
d.onmousedown = function (e) {
e = e || window.event;
var x = e.clientX + lt.left - o.offsetLeft;
var y = e.clientY + lt.top - o.offsetTop;
d.ondragstart   = "return false;";
d.onselectstart = "return false;";  
d.onselect      = "document.selection.empty();";

d.onmousemove = function (e) {
e = e || window.event;
var _left = e.clientX + lt.left - x;
var _top = e.clientY + lt.top - y;
//阻止弹出框移出网页可视化区域
if(_left < 0) {
_left = 0;
}
if(_top < 0) {
_top = 0;
}
if (( pop.hidenWidth + _left) >= pop.quyuwidth) {
_left = pop.quyuwidth - (pop.hidenWidth + 20);
}

o.style.left = _left + 'px';
o.style.top  = _top + 'px';
o.orig_x = parseInt(o.style.left) - lt.left;  
o.orig_y = parseInt(o.style.top) - lt.top; 
};

d.onmouseup = function() {  
d.onmousemove   = null;  
d.onmouseup     = null;  
d.ondragstart   = null;  
d.onselectstart = null;  
d.onselect      = null;
d.onmousedown   = null;
};
}
}
},
colose : function(){
if (document.all) { 
window.detachEvent('onscroll', pop.scrolled);
} else { 
window.removeEventListener('scroll', pop.scrolled);
}
var obj1= document.getElementById('boxDiv');
var obj2= document.getElementById('bgDiv');
obj1.innerHTML  = '';
obj2.innerHTML  = '';
var parent1 = obj1.parentNode;
var parent2 = document.body;
parent1.removeChild(obj1);
parent2.removeChild(obj2);

},

/*
* height:遮罩层高度
* width:遮罩层宽度
* titlet:遮罩层标题
* msg : 遮罩层内容
* move : 是否可移动
*/
box : function(obj){
if (obj.height) {
pop.hidenHeight = obj.height;
}
if (obj.width) {
pop.hidenWidth = obj.width;
}
if (obj.title) {
pop.title = obj.title;
}
if (obj.msg) {
pop.data = obj.msg;
}
pop.setBody();
pop.creatbox();
pop.bindScroll();
if (obj.move) {
pop.moved('boxDiv', 'boxTop');
}
}
}

自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能:...
  • u010480479
  • u010480479
  • 2014年05月06日 21:09
  • 3101

js-div遮罩层、div弹出层居中(遮罩层居中显示)

js-div遮罩层、div弹出层居中 转载自:http://www.blogjava.net/jimingminlovefly/articles/366989.html 思路:打开时,显示遮罩层S...
  • simaweier
  • simaweier
  • 2014年11月12日 17:10
  • 9090

div+css=>遮罩+弹出框(固定在页面中间)

效果图css代码 body{ font-family: "Microsoft YaHei" ! important; } /*灰色遮罩层*/ .fade{ width:100%; ...
  • Seety_ST
  • Seety_ST
  • 2015年10月10日 10:35
  • 7054

为兼容IE8 使用layer弹框简记

1.首先下载layer相关文件夹,将其导入项目中(一定要是文件夹),虽然只用了layer.js. 2.之后直接在项目中引用layer.js即可.当然前提是要先引入jquery1.8以上. 3.开始...
  • sweet__queen
  • sweet__queen
  • 2017年06月02日 19:05
  • 3539

弹框遮罩层

.back_con{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; ...
  • zy1817204670
  • zy1817204670
  • 2017年09月12日 16:29
  • 64

自适应高度的一个遮罩层css

#J_GrayMask {display:block;position: fixed;z-index:3;top: 0px;left: 0px;height:100%;width:100%;backg...
  • hsany330
  • hsany330
  • 2013年04月08日 15:00
  • 1403

html+css+js实现弹出框+遮罩层

最近看到好多童鞋都在找弹出框和遮罩层的实现。 先来说遮罩层是个神马? 其实就是你弹出个东西,然后其他地方变黑了一点。就像遮住了其他地方一样。 那么实现原理呢? 就是设置一个div,宽度,高度是屏幕...
  • yy839126257
  • yy839126257
  • 2015年04月17日 14:45
  • 3288

[jquery]弹框,遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。 所以自己必须要写一个自己的弹框以达到目的: 需要满足: 1.兼容原系统 2.点击弹框背景变灰,背景功能不可点击(...
  • xixi880928
  • xixi880928
  • 2017年12月18日 14:57
  • 79

精确定位浏览器内部可视区域大小并弹出遮罩层

代码: 始终居中的弹出层 var winWidth = 0; var winHeight = 0; function findDimensions(){ /...
  • huxiweng
  • huxiweng
  • 2012年02月13日 17:51
  • 1775

全自动遮罩层插件layer2.0版本发布(可传参),兼容IE7以上

遮罩层是我们在网页中经常用到的一种功能,本人将其封装成了一个插件,以便更快捷方便的使用。 此插件原理很简单,首先生成一个遮罩背影,然后计算内容显示窗体所要距离浏览器上下的距离进行定位,当浏览器窗...
  • u010480479
  • u010480479
  • 2015年09月18日 13:57
  • 4327
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简易的javascript遮罩层弹框,支持ie(7~10),ff,goole
举报原因:
原因补充:

(最多只允许输入30个字)