使用原生JavaScript简单封装的一个消息提示模态框,如果谁有更好的方式可以分享,谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 弹窗message-dialog样式开始 */
a {
text-decoration: none;
}
.message-dialog {
font-size: 1rem;
position: relative;
}
/* 遮罩样式 */
.message-dialog-conver {
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
opacity: 0.3;
text-align: end;
}
/* 主体样式 */
.message-dialog-main {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top: 50%;
z-index: 200;
width: 100%;
left: 100%;
-webkit-transform: translate(-100%, -100%);
-moz-transform: translate(-100%, -100%);
-ms-transform: translate(-100%, -100%);
-o-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
/* 标题样式 */
.message-dialog-header {
display: flex;
justify-content: center;
align-content: center;
text-align: center;
border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 255);
width: 86%;
height: 2rem;
line-height: 2rem;
border-top-left-radius: 0.6rem;
border-top-right-radius: 0.6rem;
}
/* 内容样式 */
.message-dialog-content {
display: flex;
justify-content: center;
align-content: center;
text-align: center;
width: 86%;
background: rgba(255, 255, 255, 255);
padding: 0.5rem 0;
border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3)
}
/* 底部样式 */
.message-dialog-footer {
width: 86%;
height: 2.5rem;
}
.message-dialog-btn {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 255);
border-bottom-left-radius: 0.6rem;
border-bottom-right-radius: 0.6rem;
border-top: 0.01rem solid #d5d6d7;
display: flex;
justify-content: center;
text-align: center;
align-content: center;
align-items: center;
}
.message-dialog-sure,
.message-dialog-cancel {
display: block;
width: 10%;
text-align: center;
cursor: pointer;
height: 2rem;
line-height: 2rem;
border-radius: 0.3rem;
margin: 0 1rem;
color: #ffff;
border: none;
letter-spacing: .6px;
background-color: #d6d6d6;
}
.message-dialog-sure {
color: #212122;
border: none;
background-color: #449d44;
}
.message-dialog-close {
cursor: pointer;
color: #347d4a;
height: 2rem;
line-height: 2rem;
text-align: center;
}
</style>
</head>
<body>
<button type="button" onclick="show()">弹出</button>
<!-- <div class="message-dialog">
<div class="message-dialog-conver">遮罩</div>
<div class="message-dialog-main">
<div class="message-dialog-header">标题</div>
<div class="message-dialog-content">内容</div>
<div class="message-dialog-footer">
<div class="message-dialog-btn">
<a href="#">关闭</a>
<a>关闭</a>
</div>
</div>
</div>
</div> -->
<div id="message"></div>
<script>
var messageDialog = {
showMessage: function(options, autoHide) {
this.timers = [];
this.options = options || {};
this.autoHide = autoHide || false;
var isShow = this.options.isShow || false;
var width = this.options.width || 86;
var topDistance = this.options.topDistance || 50;
var leftDistance = this.options.leftDistance || 93;
var btn_width = this.options.btnWidth || 10;
var sure = this.options.isSure || false;
var html = '<div class="message-dialog-conver"></div>\
<div class="message-dialog-main">\
<div class="message-dialog-header">' this.options.title '</div>\
<div class="message-dialog-content">' this.options.content '</div>\
<div class="message-dialog-footer">\
<div class="message-dialog-btn">\
<!--<a class="message-dialog-sure">确定</a>-->\
<!--<a class="message-dialog-cancel">取消</a>-->\
</div>\
</div>\
</div>';
//1.0 创建元素
var element = document.createElement('div');
element.setAttribute('class', "message-dialog");
//2.0 插入元素
element.innerHTML = html;
//2.1 设置弹出框的大小
element.querySelector(".message-dialog-main").style.width = width '%';
element.querySelector(".message-dialog-main").style.top = topDistance '%';
element.querySelector(".message-dialog-main").style.left = leftDistance '%';
//2.2 是否需要插入确认或关闭按钮
if (sure) {
var sureElement = document.createElement('a');
sureElement.setAttribute('class', 'message-dialog-sure');
// sureElement.setAttribute('href', '#');
sureElement.innerHTML = '确定';
element.querySelector(".message-dialog-btn").appendChild(sureElement);
var cancelElement = document.createElement('a');
cancelElement.setAttribute('class', 'message-dialog-cancel');
cancelElement.innerHTML = '取消';
element.querySelector(".message-dialog-btn").appendChild(cancelElement);
} else {
var closeElment = document.createElement('a');
closeElment.setAttribute('class', 'message-dialog-close');
closeElment.innerHTML = '关闭';
element.querySelector(".message-dialog-btn").appendChild(closeElment);
}
//2.3 设置按钮的长度
var array = element.querySelectorAll(".message-dialog-btn a");
for (var key in array) {
if (!array.hasOwnProperty(key)) {
continue;
}
var item = array[key];
item.style.width = btn_width '%';
}
//3.0 插入到页面并显示
if (this.options.el) {
var ele = document.getElementById(this.options.el);
if (ele) {
document.getElementById(this.options.el).appendChild(element);
} else {
document.getElementsByTagName("body")[0].appendChild(element);
}
} else {
document.getElementsByTagName("body")[0].appendChild(element);
}
//4.0 是否显示
if (!isShow) {
element.style.display = "none";
}
//5.0 绑定事件
if (element.querySelector('.message-dialog-sure') && element.querySelector('.message-dialog-cancel')) {
element.querySelector('.message-dialog-sure').onclick = element.querySelector('.message-dialog-cancel').onclick = this.enventsFunc.bind("", this, element);
} else {
element.querySelector('.message-dialog-close').onclick = this.enventsFunc.bind("", this, element);
}
return this;
},
show: function() {
this.cleartimers();
this.options.isShow = true;
document.querySelector('.message-dialog').style.display = 'block';
if (this.autoHide) {
var t = setTimeout(() => {
this.hide();
}, this.options.timeout || 3000);
this.timers.push(t);
}
return this;
},
hide: function() {
this.cleartimers();
this.options.isShow = false;
document.querySelector('.message-dialog').style.display = 'none';
if (this.options.el) {
var ele = document.getElementById(this.options.el);
if (ele) {
document.getElementById(this.options.el).removeChild(document.querySelector('.message-dialog'));
} else {
document.getElementsByTagName("body")[0].removeChild(document.querySelector('.message-dialog'));
}
} else {
document.getElementsByTagName("body")[0].removeChild(document.querySelector('.message-dialog'));
}
},
enventsFunc: function(e, doc, target) {
var thisEvent = target.target;
if (thisEvent.classList.contains("message-dialog-sure")) {
e.options.confirm();
}
if (thisEvent.classList.contains("message-dialog-cancel")) {
e.options.cancel();
}
e.hide();
return false;
},
cleartimers: function() {
if (this.timers && this.timers.length > 0) {
for (var index = 0; index < this.timers.length; index ) {
var timer = this.timers[index];
if (timer) {
window.clearTimeout(timer);
}
}
}
}
};
function show() {
messageDialog.showMessage({
el: "message",
title: "信息提示",
content: "错误消息",
btnWidth: 30,
width: 30,
topDistance: 50,
leftDistance: 65,
isSure: false,
timeout: 3000,
confirm: function() {
alert("1234");
},
cancel: function() {},
}, false).show();
}
</script>
</body>
</html>
更多专业前端知识,请上 【猿2048】www.mk2048.com