解题思路:
JS中控制标签的display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* height:100%是铺满父容器的高度。 height:100vh是指铺满屏幕的高度。 */
.mask{
display: none;
justify-content: center;
align-items: center;
position: fixed;
left:0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.3);
}
.mask>div{
width: 300px;
background-color: #fff;
padding: 15px;
}
.mask>div .content{
min-height: 100px;
}
</style>
</head>
<body>
<button class="btn">弹窗</button>
<div class="mask">
<div>
<div>提示</div>
<div class="content"></div>
<button class="close">关闭</button>
</div>
</div>
<script >
var btn = document.querySelector(".btn");
var modal = document.querySelector(".mask");
//点击弹窗按钮时,1.跳出MASK 2.跳出提示文字
btn.onclick=function(){
modal.style.display ="flex";
modal.querySelector(".content").innerText = "你好,有什么问题?"
}
//点击关闭按钮时 MASK 变为none
modal.querySelector(".close").onclick = function(){
modal.style.display = "none";
}
</script>
</body>
</html>
DOM封装
css
.mask {
display: none;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
}
.mask>div {
width: 300px;
background-color: #fff;
padding: 15px;
}
.mask #content {
min-height: 100px;
}
.mask #btn {
display: flex;
justify-content: space-between;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./utlis.css">
</head>
<body>
<button class="btn1">弹窗1</button>
<button class="btn2">弹窗2</button>
<script src="./utils.js"></script>
<script>
//第一个弹窗
var btn = document.querySelector(".btn1");
var modal = new Modal();
//给btns 添加点击事件
btn.onclick = function () {
//调用Modal.init 方法
modal.init({
cancel: function () {
console.log("你点击了弹窗1取消");
},
ok: function () {
console.log("你点击了弹窗1确认");
}
})
modal.show("提示", "你点击了按钮1");
}
//第二个弹窗
var btn = document.querySelector(".btn2");
btn.onclick = function () {
modal.init({
cancel: function () {
console.log("你点击了弹窗2取消")
},
ok: function () {
console.log("你点击了弹窗1确认");
}
})
modal.show("提示", "你点击了按钮2");
}
</script>
</body>
</html>
js
//封装一个函数 modal
function Modal() {
//4.需要在原型上添加一个hasIns 判断构造函数是否创造了实例
if (!Modal.prototype.hasIns) {
//如果hasins为false 则代表还没有创造实例,所以需要调用create函数
Modal.prototype.hasIns = true;
this.create();
}
}
/**
*
* @param {*} option cancel是 点击取消 执行的回调函数,ok是 点击确认 执行的回调函数
* {cancel:callback,ok:callback}
*/
//5.在Modal原型上创造一个 回调函数的方法 init
Modal.prototype.init = function (option) {
this.cancel = option.cancel;
this.confirm = option.ok;
}
//1. 创造一个create构造函数 创建标签
Modal.prototype.create = function () {
//mask 标签
var div = document.createElement("div");
div.className = "mask";
//提示框 标签
var divcon = document.createElement("div");
//提示框标签里面的 三个内容标签
var str = "<div id='title'>提示</div> <div id='content'></div> <div id = 'btn'><button class = 'cancel'>取消</button><button class = 'confirm'>确认</button></div> "
//返回标签中的所有内容
divcon.innerHTML = str;
//把divcon 标签添加到div 标签中
div.appendChild(divcon);
//把div 标签添加到body中
document.body.appendChild(div)
//3.点击取消按钮 / 确认按钮 的方法
//这里的this指向的是按钮对象,要想让他指向close内部对象 需要用bind
document.querySelectorAll("#btn>button")[0].onclick = this.close.bind(this);
document.querySelectorAll("#btn>button")[1].onclick = this.confirm.bind(this);
}
//2.封装三个按钮的方法
//显示弹窗的方法 show
Modal.prototype.show = function (title, content) {
//innerText 获取元素的文本内容
document.querySelector("#title").innerText = title;
document.querySelector("#content").innerText = content;
//mask 显示
document.querySelector(".mask").style.display = "flex";
}
//关闭弹窗的方法 close
Modal.prototype.close = function () {
//如果传入了cancel函数 则执行cancel函数
if (typeof this.cancel === "function") {
this.cancel();
}
document.querySelector("#title").innerText = " ";
document.querySelector("#content").innerText = " ";
//mask 不显示
document.querySelector(".mask").style.display = "none";
}
//确认弹窗的方法 ok
Modal.prototype.confirm = function () {
//如果传入了confirm函数 则执行ok函数
if (typeof this.ok === "function") {
this.ok();
}
document.querySelector("#title").innerText = " ";
document.querySelector("#content").innerText = " ";
//mask 不显示
document.querySelector(".mask").style.display = "none";
}