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