<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件开发 弹窗 </title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#box1{
border: 1px solid black;
position: absolute;
}
.head{
height: 20px;
background: #CCCCCC;
}
.right{
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<!--<div id="box1">
</div>-->
<script type="text/javascript">
//只执行一次就叫单体模式
window.onload=function()
{
var ainput = document.getElementsByTagName("input");
ainput[0].onclick=function()
{
var d1 = new Drag();
d1.init({//配置参数
});
};
};
function Drag()//属性
{
this.ologin=null;//局部变量改变成属性
this.settings={//默认参数
w:300,
h:300,
dir:"center"
}
}
Drag.prototype.init=function(opt)//方法
{
extend(this.settings,opt);
this.create();//动态创建弹窗
this.oclose();//动态创建关闭
};
Drag.prototype.create=function()
{
//var ologin =document.createElement("div");
this.ologin =document.createElement("div");
this.ologin.id="box1";
this.ologin.innerHTML=‘<div class="head"><span class="title">标题</span><span class="right">X</span></div><div class="content"></div>‘
document.body.appendChild(this.ologin);
this.setDate();//尺寸
}
Drag.prototype.setDate=function()
{ // ologin 属性因为找不到 所以要设置全局的
this.ologin.style.width = this.settings.w+"px";
this.ologin.style.height = this.settings.h+"px";
if(this.settings.dir == "center")
{
this.ologin.style.left = (viewWidth() - this.ologin.offsetWidth)/2 +"px";
this.ologin.style.top = (viewHeight() - this.ologin.offsetHeight)/2 +"px";
}
}
Drag.prototype.oclose=function()
{
var oclose =document.getElementsByTagName("span")[1];
var _this = this;
oclose.onclick=function()
{
document.body.removeChild(_this.ologin);
}
}
//-----------------------
function viewWidth(){
return document.documentElement.clientWidth;//可视区宽度
}
function viewHeight(){
return document.documentElement.clientHeight;//可视区高度
}
function extend (obj1,obj2){
for (var attr in obj2) {
obj1[attr]=obj2[attr];
}
}
</script>
</body>
</html>
时间： 2024-10-31 05:17:53