js 弹出层遮罩

最新推荐文章于 2015-01-15 13:40:15 发布

先学习在创作

最新推荐文章于 2015-01-15 13:40:15 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/lins1393997412/article/details/20715425

版权

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title>
<style type="text/css">
*{margin:0;padding: 0;}
body{height: 1000px;}
#txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}

.prompShadeDiv{display:none;position: absolute;top: 0;left: 0; opacity: 1; filter: alpha(opacity=100);z-index: 9998;background-color: #000;}
.prompt{border-radius:5px; display:none;border: 1px solid #CCC; position:fixed;_position: absolute;z-index: 9999;background-color: #fff;}
.prompt_title{ cursor:move;border-radius:5px;font-size:14px;font-weight: bold;color: #333;padding-left:10px;height: 35px;line-height: 35px;border-bottom: 1px solid #ececec;background-color:#fcfcfc; }
.prompt_close{ position: absolute;right: 10px;top: 10px; cursor: pointer; background: url("bd_split_210d2d99.gif") no-repeat -281px -41px; width: 14px;height: 13px;outline: none;display: block;}
.prompt_body{padding: 30px 20px;font-size:13px;line-height: 1.5;}

#content{width: 350px; background-color: #eee;}
#testclose{width: 50px;height: 40px; background-color: #666;}
#move_distr{width: 350px;height: 80px; background-color: #999;}
#testbody{width: 350px;height: 40px; background-color: #aaa;}
</style>
<body>

<div id="txt">
<h1>需要实现的状态</h1>
<p>1.是否有遮罩层</p>
<p>2.是否有title</p>
<p>3.alert & confirm</p>
<p>4.自定义弹出框里面的html</p>
<p>5.拖拽</p>
</div>
<div id="content" class="prompt">
<div id="testclose" class="prompt_close"></div>
<div id="move_distr" class="prompt_title"></div>
<div id="testbody" class="prompt_body"></div>
</div>

<button id="bt1" style="margin-top:200px;">有遮罩的alert弹出框</button>
<button id="bt2">没有标题和遮罩的confirm弹出框</button>


<input type="text" class="cityinput" id="city2" value="城市名">

<button id="bt3">有确定按钮的alert弹出框</button>
<button id="bt4">自定义html内容的弹出框</button>

<script type="text/javascript">

var Prompt = {
$ : function(id){return document.getElementById(id)},

init :function(option){
var
shade = this.shade = option.shade || false, //是否显示遮罩
opacity = this.opacity = option.opacity || 20, //遮罩透明度
ConfirmFun = this.ConfirmFun = option.ConfirmFun || false,
CancelFun = this.CancelFun = option.CancelFun || false;
this.prompId=this.$(option.prompId|| false);
this.prompClose=this.$(option.prompClose|| false);
this.prompMove=this.$(option.prompMove|| false);
this.prompBody=this.$(option.prompBody|| false);
this.createShade();
this.editMove();
this.addHandler(this.prompClose,"click",this.hide);
},
editMove : function(){ //title div生成
var prompt_title = this.prompMove;
if(this.prompMove){
//添加拖拽方法
this.drag();
prompt_title.style.display = "block";
}else{
prompt_title.style.display = "none";
}
},
show : function(){

var promptDiv = this.prompId,
shadeDiv = this.$("prompShadeDiv"),
bodyHeight = document.documentElement.clientHeight || document.body.clientHeight ;
promptDiv.style.display = "block";
promptDiv.style.left = (this.bodyWidth/2-(promptDiv.style.width || promptDiv.clientWidth)/2)+ "px";
promptDiv.style.top = (bodyHeight/2-(promptDiv.style.height|| promptDiv.clientHeight)/2) + "px";
if(this.shade){
shadeDiv.style.display = "block";
if (document.all) {
shadeDiv.filters.alpha.opacity = this.opacity;
shadeDiv.style.zoom = 1 ;
}else {
shadeDiv.style.opacity = this.opacity / 100;
}
}
if(this.IE6()) promptDiv.appendChild(this.createIframe()); //ie6添加iframe
},
hide : function( ){
var ll=1;
ll=1+1;
var temp=this.prompId;
Prompt.prompId.style.display = "none";
Prompt.$("prompShadeDiv").style.display = "none";
},
createShade : function(){ //创建遮罩层
var doc = document,
bodyWidth = this.bodyWidth = doc.documentElement.clientWidth || doc.body.clientWidth,
bodyHeight = this.bodyHeight = doc.documentElement.scrollHeight || doc.body.scrollHeight,
Div = doc.createElement("div");
Div.id = "prompShadeDiv";
Div.className ="prompShadeDiv";
Div.style.height = bodyHeight + "px";
Div.style.width = bodyWidth + "px";
Div.style.opacity = 0.2;
if(this.IE6()) Div.appendChild(this.createIframe("prompShadeDiv")); //ie6添加iframe
doc.body.appendChild(Div);
},
createIframe : function(div){
var width,height;
if(div == "prompShadeDiv"){
width = this.bodyWidth;
height = this.bodyHeight;
}else{
width = this.width;
height = this.height;
}
var Iframe = document.createElement('iframe');
Iframe.style.position = 'absolute';
Iframe.style.zIndex = '-1';
Iframe.style.left = '-1px';
Iframe.style.top = 0;
Iframe.style.border = 0;
Iframe.style.filter = 'alpha(opacity=0)';
Iframe.style.width = width + 'px';
Iframe.style.height = height + 'px';
return Iframe;
},
isDown : false,
drag : function(){ //添加拖拽事件
var that = this,
mouseX,mouseY,objY,objX,
prompt_move = this.prompMove,
promptId = this.prompId;

that.addHandler(prompt_move,"mousedown",function(event){
var event = window.event || event;
if(event.button == 0 || event.button==1){ //鼠标左键chrome=0 ie=1
(!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
mouseX = event.clientX;
mouseY = event.clientY;
objY = parseInt(promptId.style.top||0);
objX = parseInt(promptId.style.left||0);
that.isDown = true;
}
});

that.addHandler(document,"mousemove",function(event){
if(that.isDown){
var event = window.event || event;
// (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
promptId.style.top = event.clientY - mouseY + objY + "px";
promptId.style.left = event.clientX - mouseX + objX + "px";
}
});

that.addHandler(document,"mouseup",function(){
that.isDown = false;
});
},
getPosition : function(obj) { //获取元素在页面里的位置和宽高
var top = 0,
left = 0,
width = obj.offsetWidth,
height = obj.offsetHeight;

while(obj.offsetParent){
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}

return {"top":top,"left":left,"width":width,"height":height};
},
addHandler:function(node, type, handler){
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
},
IE6 : function(){
return !!window.ActiveXObject && !window.XMLHttpRequest;
}

}

Prompt.init({
shade : true,
opacity : 20,
width : 800,
height : 150,
prompId : "content",
prompClose : "testclose",
prompMove: "move_distr",
prompBody: "testbody"
});

document.getElementById("bt1").onclick = function(){
Prompt.show();
}

</script>

</body>
</html>

先学习在创作

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 弹出层遮罩

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 *{margin:0;padding: 0;} body{height: 1000px;} #txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;} .prompShadeDiv{display:none;posit
复制链接

扫一扫