目的: オブジェクト指向プラグイン (モーダル ボックス) の作成を練習する
1. 複数のモーダル ボックスは同じ外観を持ち、クリックするたびに 1 つ表示されます。
コンストラクター。コンストラクター モデルを使用してモーダル ボックスをカプセル化します。それぞれの新しいモーダル ボックスが生成されるため、別のボタンをクリックすると新しいモーダル ボックスが作成され、インスタンス化されます。
2. モーダルボックスにはどのような機能がありますか? 機能 (表示) をオンにし、機能をオフにし、各モーダル ボックスには2 つの機能が含まれます
-
オープン関数
-
閉じる関数
質問: open メソッドと close メソッドはどこに書かれていますか?
コンストラクターモデルのプロトタイプオブジェクト、共有メソッド
バグ:複数回クリックすると、多くのモーダル ボックスが表示されます
解決策:表示を開く準備をするときは、まずページにモーダル ボックスがあるかどうかを確認し、モーダル ボックスがある場合は削除し、ない場合は追加します。
多くを語る必要はありません。ただコードを書くだけです。
最も重要なのは JS 部分ですが、コードが比較的短いため、ここでは JS を 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="../模态框封装css/模态框.css">
</head>
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示<i></i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
//1.Modal 构造函数封装 -模态框
function Modal(title = '', message = '') {
// console.log(title,message);
//创建Modal模态框盒子
//1.1 创建div标签
this.modalBox = document.createElement('div')
//1.2 给div标签添加类名为modal
this.modalBox.className = "modal"
//1.3 model盒子内部填充两个div标签，并且修改文字内容
this.modalBox.innerHTML = `
<div class="close"><i>X</i></div>
<div class="header">${title}</div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
// new Modal("温馨提示","你没有权限删除")
// new Modal("友情提示","你还没有登录")
//2.给构造函数原型对象挂载open方法
Modal.prototype.open = function () {
//先来判断页面中是否有modal盒子，如果有就先删除，否则继续添加
const box=document.querySelector('.modal')
box&&box.remove()
//注意这个函数不要使用箭头函数，因为要用到this指向
//把刚才创建的modalBox显示到页面body中
document.body.append(this.modalBox)
//要等着盒子显示出来，就可以绑定点击事件了，所以close一定要在open中写
this.modalBox.querySelector('i').addEventListener('click',()=>{
//这个地方用箭头函数，此处this指向上一级，也就是实例对象
this.close();
})
}
//3.给构造函数原型对象挂载close方法
Modal.prototype.close = function () {
this.modalBox.remove()
}
//测试一下 点击 删除按钮
document.querySelector('#delete').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("温馨提示：", "您目前没有权限删除~");
//实例对象调用open方法
del.open()
})
//测试一下 点击 登录按钮
document.querySelector('#login').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("友情提示：", "您还没有注册呢~");
//实例对象调用open方法
del.open()
})
</script>
</body>
</html>Scss パーツ
.modal {
margin: 0 auto;
width: 300px;
height: 180px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
display: flex;
flex-direction: column;
font-size: 22px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 20px 30px;
box-shadow: 2px 2px 2px 3px rgb(212, 211, 211);
.close{
width: 100%;
height:20px;
i{
display: block;
width: 20px;
height: 20px;
float: right;
cursor: pointer;
color: rgb(108, 104, 104);
}
}
.header {
width: 100%;
height: 30%;
line-height: 60px;
}
.body {
width: 100%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
注: この小さなケースはマスクされておらず、ポップアップ ウィンドウが表示され、ページ上の他の機能をクリックできます。ただし、クリックはクリックであり、ページには常に最大 1 つのポップアップ ウィンドウが表示されます。
マスクを追加することもできます。開くとマスクを表示、閉じるとマスクを閉じる、以下が変更内容です
<!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="../模态框封装css/模态框.css">
</head>
<body>
<div class="zhezhao"></div>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示<i></i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
//获取一下遮罩
var zhezhao=document.querySelector(".zhezhao")
//1.Modal 构造函数封装 -模态框
function Modal(title = '', message = '') {
// console.log(title,message);
//创建Modal模态框盒子
//1.1 创建div标签
this.modalBox = document.createElement('div')
//1.2 给div标签添加类名为modal
this.modalBox.className = "modal"
//1.3 model盒子内部填充两个div标签，并且修改文字内容
this.modalBox.innerHTML = `
<div class="close"><i>X</i></div>
<div class="header">${title}</div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
// new Modal("温馨提示","你没有权限删除")
// new Modal("友情提示","你还没有登录")
//2.给构造函数原型对象挂载open方法
Modal.prototype.open = function () {
//先来判断页面中是否有modal盒子，如果有就先删除，否则继续添加
const box=document.querySelector('.modal')
box&&box.remove()
//注意这个函数不要使用箭头函数，因为要用到this指向
//把刚才创建的modalBox显示到页面body中
document.body.append(this.modalBox)
//要等着盒子显示出来，就可以绑定点击事件了，所以close一定要在open中写
this.modalBox.querySelector('i').addEventListener('click',()=>{
//这个地方用箭头函数，此处this指向上一级，也就是实例对象
this.close();
})
}
//3.给构造函数原型对象挂载close方法
Modal.prototype.close = function () {
this.modalBox.remove()
zhezhao.style.display="none"
}
//测试一下 点击 删除按钮
document.querySelector('#delete').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("温馨提示：", "您目前没有权限删除~");
//实例对象调用open方法
del.open()
zhezhao.style.display="block"
})
//测试一下 点击 登录按钮
document.querySelector('#login').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("友情提示：", "您还没有注册呢~");
//实例对象调用open方法
del.open()
zhezhao.style.display="block"
})
</script>
</body>
</html>.modal {
margin: 0 auto;
width: 300px;
height: 180px;
position: relative;
background-color: rgb(255, 255, 255);
border-radius: 3px;
display: flex;
flex-direction: column;
font-size: 22px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 20px 30px;
box-shadow: 2px 2px 2px rgb(212, 211, 211);
z-index: 10000000;
.close{
width: 100%;
height:20px;
i{
display: block;
width: 20px;
height: 20px;
float: right;
cursor: pointer;
color: rgb(108, 104, 104);
}
}
.header {
width: 100%;
height: 30%;
line-height: 60px;
}
.body {
width: 100%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
.zhezhao{
width: 100%;
height: 100%;
display: none;
position: absolute;
z-index: 999;
background-color: rgb(38, 38, 38);
opacity: 0.5;
}
効果に関しては、手動でコピー＆ペーストして試すことができます。