jsオブジェクトコンポーネント向け開発---弾窓
16490 ワード
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
margin: 100px;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #DD8D7C;
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
}
.box .title{
height: 40px;
line-height: 40px;
background: #d8d8d8;
}
.box .title .close{
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}
.mark{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: rgba(0,0,0,0.5);
}
style>
head>
<body>
<input type="button" name="" id="" value=" 1" />
<input type="button" name="" id="" value=" 2" />
<input type="button" name="" id="" value=" 3" />
body>
<script type="text/javascript">
window.onload = function(){
var aBtns = document.getElementsByTagName('input');
aBtns[0].onclick = function(){
var d1 = new Dialog();
d1.init({
w:200,
h:200,
title:' ',
con:' ',
})
};
aBtns[1].onclick = function(){
var d2 = new Dialog();
d2.init({
w:300,
h:300,
title:'qq',
con:'hi',
dir:'right',
})
}
aBtns[2].onclick = function(){
var d3 = new Dialog();
d3.init({
w:400,
h:400,
title:' ',
con:'hello',
mark:true
})
}
}
function Dialog(){
this.oBox = null;
this.oMark = null;
this.setting = { //
w:300,
h:300,
dir:'center',
title:'',
mark:false
}
}
Dialog.prototype.init = function(opt){
extend(this.setting,opt);
this.creat();
this.dir();
this.close();
if(this.setting.mark){
this.mark();
}
}
//
Dialog.prototype.creat = function(){
this.oBox = document.createElement('div');
this.oBox.className = "box";
this.oBox.innerHTML = ''+this.setting.title+'X'+this.setting.con+''
document.body.appendChild(this.oBox);
}
//
Dialog.prototype.mark = function(){
this.oMark = document.createElement('div');
this.oMark.className = "mark";
document.body.appendChild(this.oMark);
}
//
Dialog.prototype.dir = function(){
this.oBox.style.width = this.setting.w + 'px';
this.oBox.style.height = this.setting.h +'px';
if(this.setting.dir == 'center'){
this.oBox.style.left = (vieww() - this.oBox.offsetWidth)/2 + "px";
this.oBox.style.top = (viewh() - this.oBox.offsetHeight)/2 + "px";
}
if(this.setting.dir == 'right'){
this.oBox.style.left = vieww() - this.oBox.offsetWidth + "px";
this.oBox.style.top = viewh() - this.oBox.offsetHeight + "px";
}
}
//
Dialog.prototype.close = function(){
var oClose = this.oBox.getElementsByClassName('close')[0];
var _this = this;
oClose.onclick = function(){
document.body.removeChild( _this.oBox);
if(_this.setting.mark){
document.body.removeChild( _this.oMark);
}
}
}
function vieww(){
return document.documentElement.clientWidth;
}
function viewh(){
return document.documentElement.clientHeight;
}
//
function extend(obj1,obj2){
for(var i in obj2){
obj1[i] = obj2[i];
}
}
script>
html>