第一种方法：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/message.css" type="text/css" />
<script src="./js/message2.js" type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<!-- <div class="k-wrapper"></div>
<div class="k-dialog">
<div class="k-header">
<span class="k-title">提示</span><span class="k-close">X</span>
</div>
<div class="k-body">
<span>这是一段文本</span>
<input class="input-inner" type="text" />
</div>
<div class="k-footer">
<span class="k-default">取消</span>
<span class="k-primary">确定</span>
</div>
</div> -->
<button onclick="showDailog1()">点击我显示第一个对话框</button>
<button onclick="showDailog2()">点击我显示第二个对话框</button>
</body>
<script>
// 开闭原则：对内要封闭；对外开放；
let d1 = new Dailog({
width: "30%",
height: "250px",
title: "测试标题11",
content: "测试内容11",
dragable: true, //是否可拖拽
maskable: false, //是否有遮罩
isCancel: true //是否有取消
})
function showDailog1() {
// 显示对话框
d1.showDailog();
}
// let d2 = new Dailog({
// width: "30%",
// height: "250px",
// title: "测试标题11",
// content: "测试内容11",
// dragable: true, //是否可拖拽
// maskable: false, //是否有遮罩
// isCancel: false //是否有取消
// })
// function showDailog2() {
// // 显示对话框
// d2.showDailog();
// }
</script>
</html>
css：
.k-dialog {
width: 30%;
z-index: 2001;
display: block;
position: absolute;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
margin: 0 auto;
top: 15vh;
left:30%;
display: none;
}
.k-wrapper {
display: none;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: black;
opacity: 0.4;
z-index: 2000;
}
.k-header {
padding: 20px 20px 10px;
}
.k-header .k-title {
line-height: 24px;
font-size: 18px;
color: #303133;
float: left;
}
.k-body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
}
.k-footer {
padding: 10px 20px 30px;
text-align: right;
}
.k-close {
color: #909399;
font-weight: 400;
float: right;
cursor: pointer;
}
.k-default {
color: #606266;
border: 1px solid #dcdfe6;
text-align: center;
cursor: pointer;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
font-weight: 500;
margin-right: 10px;
}
.k-default:hover {
color: #409eff;
background: #ecf5ff;
border-color: #c6e2ff;
}
.k-primary {
border: 1px solid #dcdfe6;
text-align: center;
cursor: pointer;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
font-weight: 500;
background: #409eff;
color: #fff;
margin-left: 10px;
}
.k-primary:hover {
background: #66b1ff;
}
.k-input{
width: 100%;
margin-left: 20px;
margin-bottom: 20px;
}
.input-inner {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
margin-top: 20px;
}
js：
class Dailog {
constructor(options) {
//默认配置合并；方式一；
// let { width="40%", height="240px"} = options;
// let newOpts = {
// width,
// height
// }
// console.log(newOpts);
// 方式二：
let opts = Object.assign({
width: "20%",
height: "100px",
title: "默认标题",
content: "默认内容",
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: false //是否有取消
}, options);
// console.log(opts);
this.opts = opts;
this.init();
}
init() {
// 节点生成（节点隐藏）
this.renderView();
// 关闭对话框；
this.close();
}
// 显示对话框；
showDailog() {
//通过样式显示隐藏；
if (this.opts.maskable) {
this.divEle.querySelector(".k-wrapper").style.display = "block";
}
this.divEle.querySelector(".k-dialog").style.display = "block";
}
close() {
// 隐藏对话框；隐藏遮罩；
// document.querySelector(".k-wrapper").getElementsByClassName.display = "none";
console.log(this.divEle);
// let that = this;
// 原因
if (this.divEle.querySelector(".k-default")) {
this.divEle.querySelector(".k-default").onclick = () => {
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
// document.querySelectorAll(".k-wrapper").style.display = "none";
// document.querySelectorAll(".k-dialog").style.display = "none";
}
}
this.divEle.querySelector(".k-primary").onclick = () => {
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
}
this.divEle.querySelector(".k-close").onclick = () => {
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
}
}
//渲染视图；
renderView() {
let divEle = document.createElement("div");
divEle.innerHTML = `<div class="k-wrapper"></div>
<div class="k-dialog" style="width:${this.opts.width};height:${this.opts.height}">
<div class="k-header">
<span class="k-title">${this.opts.title}</span><span class="k-close">X</span>
</div>
<div class="k-body">
<span>${this.opts.content}</span>
</div>
<div class="k-footer">
${this.opts.isCancel ? '<span class="k-default">取消</span>' : ''}
<span class="k-primary">确定</span>
</div>
</div>`;
document.querySelector("body").appendChild(divEle);
this.divEle = divEle;
}
}
网友评论