弹窗组件的开发_JavaScript

一、需求分析

　　开发过程中弹窗是必不可少的，如果我们每次需要弹窗都要重新开发，既浪费了人力又影响了性能，那么组件是不错的选择。

二、先写样式

　　<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>