<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dialog demo</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#Dialog {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
}
.dialog-wrap-inner {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
display: flex;
flex-direction: column;
justify-content: space-around
}
.dialog-wrap-title{
width:100%;
border-bottom:1px solid #000;
box-sizing: border-box;
padding-left:10px;
padding-right:10px;
display: flex;
justify-content: space-between;
}
#dialog-close{
color:#000;
font-weight: bold;
}
.dialog-inner{
display: flex;
flex-direction: column;
justify-content: space-between;
width:100%;
box-sizing: border-box;
padding:10px;
}
.dialog-wrap-footer {
width: 100%;
display: flex;
justify-content: space-around;
}
.dialog-wrap-footer a {
padding: 9px 41px;
display: inline-block;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<button id="runBtn" style="cursor: pointer;">点击运行</button>
<script>
"use strict";
(function (window) {
Dialog.prototype.defaults = {
target: null,
ifTitle: true,
title: '这是一个默认的标题',
width: 500,
height: 300,
mainBgColor: '#fff',
mainFontColor: '#000',
mainRadiusPx: '0',
content: '这是一段默认的内容...',
ok: true,
okText: '确定',
okBgColor: '#00bfce',
okFontColor: '#fff',
cancel: true,
cancelText: '取消',
cancelBgColor: '#00bfce',
cancelFontColor: '#fff',
buttonRadiusPx: '0'
};
//如果用户自己设置了参数就采用用户的，没有的话就采用默认的
Dialog.prototype.extend = function (dest, src) {
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dest[prop] = src[prop];
}
}
return dest;
};
//设置模板
Dialog.prototype.template = function () {
let title =
`<div class='dialog-wrap-title'><span class='dialog-title'>${this.opts.title}</span><a href='javascript:;' id='dialog-close'>x</a></div>`,
content = `<div class='dialog-wrap-content'>${this.opts.content}</div>`,
footer =
`<div class='dialog-wrap-footer'><a href='javascript:;' id='dialog-ok'>${this.opts
.okText}</a><a href='javascript:;' id='dialog-cancel'>${this.opts.cancelText}</a></div>`,
_inner=document.createElement("div"),
_innerWrap = document.createElement("div"),
_Dialog = document.createElement("div");
_inner.className="dialog-inner";
_innerWrap.className = "dialog-wrap-inner";
_innerWrap.style.backgroundColor = this.opts.mainBgColor;
_innerWrap.style.color = this.opts.mainFontColor;
_innerWrap.style.borderRadius = this.opts.mainRadiusPx;
_inner.innerHTML = `${content}${footer}`;
_innerWrap.innerHTML=title;
_innerWrap.appendChild(_inner);
_Dialog.setAttribute("id", "Dialog");
_Dialog.appendChild(_innerWrap);
return _Dialog;
};
//给确定 取消 x 绑定点击事件
Dialog.prototype.bindEvents = function () {
let _Dialog = document.getElementById("Dialog");
document.getElementById("dialog-close").addEventListener("click", function (e) {
e.preventDefault();
_Dialog.style.display = "none";
});
document.getElementById("dialog-ok").addEventListener("click", function (e) {
e.preventDefault();
_Dialog.style.display = "none";
});
document.getElementById("dialog-cancel").addEventListener("click", function (e) {
e.preventDefault();
_Dialog.style.display = "none";
});
};
// 对话框初始化
Dialog.prototype.init = function () {
let layout = this.template();
if (this.opts.target) {
document.body.appendChild(layout);
if(this.opts.ifTitle==false){
document.querySelector('.dialog-wrap-title').style.display="none";
}
let dialogOk = document.getElementById('dialog-ok'),
dialogCancel = document.getElementById('dialog-cancel');
dialogOk.style.backgroundColor = this.opts.okBgColor;
dialogOk.style.color = this.opts.okFontColor;
dialogOk.style.borderRadius = this.opts.buttonRadiusPx;
dialogCancel.style.backgroundColor = this.opts.cancelBgColor;
dialogCancel.style.color = this.opts.cancelFontColor;
dialogCancel.style.borderRadius = this.opts.buttonRadiusPx;
document.querySelector(this.opts.target).addEventListener("click", function () {
document.getElementById('Dialog').style.display = "block";
});
dialogOk.style.display = this.opts.ok ? 'block' : 'none';
dialogCancel.style.display = this.opts.cancel ? 'block' : 'none';
} else {
document.body.appendChild(layout);
document.body.addEventListener("click", function (e) {
document.getElementById('Dialog').style.display = "block";
});
}
this.bindEvents();
};
//设置对话框的宽高
Dialog.prototype.setSize = function (width,height) {
let inner = document.querySelector(".dialog-wrap-inner");
// 如果只有一个参数，则等高等宽
if (arguments.length === 1) {
height = width;
}
// 匹配是否是百分数
let dialogReg = /%/i;
// 检测宽
if (dialogReg.test(width)) {
inner.style.width = width;
inner.style.marginLeft = -(Number(width.slice(0, width.indexOf('%'))) / 2) + '%';
} else {
if(!isNaN(Number(width))){
inner.style.width = width + "px";
inner.style.marginLeft = -width / 2 + "px";
}else{
alert('您输入的参数不正确，请重新输入！');
}
}
// 检测高
if (dialogReg.test(height)) {
inner.style.height = height;
inner.style.marginTop = -(Number(height.slice(0, height.indexOf('%'))) / 2) + '%';
} else {
inner.style.height = height + "px";
inner.style.marginTop = -height / 2 + "px";
if(!isNaN(Number(height))){
inner.style.height = height + "px";
inner.style.marginTop = -height / 2 + "px";
}else{
alert('您输入的参数不正确，请重新输入！');
}
}
}
function Dialog(opts) {
this.opts = this.extend(this.defaults, opts);
this.init();
}
window.Dialog = Dialog;
}(window));
var dialog = new Dialog({
target: '#runBtn',
title:'这是一个沙雕标题',
content: '这是一块内容的身上看到手机导航',
mainRadiusPx: '5px',
ok: true,
okText: '好的',
okBgColor: '#00bfce',
okFontColor: '#fff',
buttonRadiusPx: '5px'
}).setSize(300,200);
</script>
</body>
</html>
