一、需求分析
开发过程中弹窗是必不可少的，如果我们每次需要弹窗都要重新开发，既浪费了人力又影响了性能，那么组件是不错的选择。
二、先写样式
<style>
* {
margin:
0;
padding:
0;
}
.login {
background:
#fff;
border:
1px
solid
#000;
position:
absolute;
left:
0;
top:
0;
}
.title {
width:
100%;
height:
30px;
background:
#333;
color:
#fff;
}
.title .close {
display:
block;
float:
right;
}
<
/
style
>
*对应的 html标签如下，先注释掉，一会动态加进body。
<!-- <div class="login">
<div class="title">
<span>111</span><span class="close">X</span>
</div>
<div class="content"></div>
</div> -->
三、body的内容
<
input
type=
"button"
value=
"1"
>
<
input
type=
"button"
value=
"2"
>
<
input
type=
"button"
value=
"3"
>
四、脚本
<
script
>
window.
onload =
function() {
var
aInput =
document.
getElementsByTagName(
'input');
aInput[
0].
onclick =
function() {
var
d1 =
new
Dialog();
d1.
init();
// 这里走默认配置
}
aInput[
1].
onclick =
function() {
var
d1 =
new
Dialog();
d1.
init({
dir:
'right'
// 自定义配置
});
}
}
function
Dialog() {
this.
oLogin =
null;
this.
settings = {
// 默认配置
w:
300,
h:
300,
dir:
'center'
}
}
Dialog.
prototype.
init =
function(
opt) {
extend(
this.
settings,
opt);
this.
create();
}
Dialog.
prototype.
create =
function() {
this.
oLogin =
document.
createElement(
'div');
this.
oLogin.
className =
'login';
this.
oLogin.
innerHTML =
`<div class="title">
<span>111</span><span class="close">X</span>
</div>
<div class="content"></div>`;
document.
body.
appendChild(
this.
oLogin);
this.
setData();
}
Dialog.
prototype.
setData =
function() {
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';
}
else
if (
this.
settings.
dir ==
'right') {
this.
oLogin.
style.
left = (
viewWidth() -
this.
oLogin.
offsetWidth) +
'px';
this.
oLogin.
style.
top = (
viewHeight() -
this.
oLogin.
offsetHeight) +
'px';
}
}
// 合并对象
function
extend(
obj1,
obj2) {
for (
var
attr
in
obj2) {
obj1[
attr] =
obj2[
attr];
}
}
// 获取可视区的宽
function
viewWidth() {
return
document.
documentElement.
clientWidth;
}
// 获取可视区的高
function
viewHeight() {
return
document.
documentElement.
clientHeight;
}
<
/
script
>
五、运行效果图
点击第一个按钮弹出中间的弹窗；
点击第二个按钮弹出右下角的弹窗；
