溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“怎么使用JavaScript封裝彈框插件”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
知識點(diǎn)1、document.querySelector() 方法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。
querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 [NodeList] 對象。
知識點(diǎn)2、document.createElement() 用于創(chuàng)建一個元素
知識點(diǎn)3、innerHTML可獲取或設(shè)置指定元素標(biāo)簽內(nèi)的 html內(nèi)容，從該元素標(biāo)簽的起始位置到終止位置的全部內(nèi)容(包含html標(biāo)簽)。
<!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" />
<title>Document</title>
<link rel="stylesheet" href="../css/tanchuang.css" />
</head>
<body>
<button>
彈窗
</button>
<script>
var control = document.querySelector("button");
control.onclick = function() {
var shade = document.createElement("div");
shade.className = "shade";
shade.innerHTML = `
<div class="popwindows">
<div class="tltle">
<div class="text"><h4>溫馨提示</h4></div>
<div class="exit"></div>
</div>
<div class="content"><h5>是否添加一個頁面生成一個藍(lán)色div</h5></div>
<div class="endbtn">
<div class="btn confirm">確定</div>
<div class="btn cancel">取消</div>
</div>
</div>
`
document.body.appendChild(shade);
var cancel = document.querySelector(".btn.cancel");
cancel.onclick = function() {
document.body.removeChild(shade);
}
var confirmDiv = document.querySelector(".btn.confirm");
confirmDiv.onclick = function() {
var a = document.createElement("div")
a.style.backgroundColor = "red";
a.style.width = "100px";
a.style.height = "100px";
document.body.appendChild(a);
document.body.removeChild(shade)
}
}
</script>
</body>
</html>tanchuang.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.shade {
display: flex;
top: 0;
left: 0;
width: 100%;
height: 600px;
background-color: rgba(0, 0, 0, 0.5);
}
.shade .popwindows {
width: 400px;
height: 300px;
background-color: #f2f2f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.shade .popwindows .tltle {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
flex: 1;
border-bottom: 1px solid #bdb8b8;
}
.shade .popwindows .tltle .text {
flex: 1;
float: left;
padding-left: 10px;
font-family: "微軟雅黑";
}
.shade .popwindows .tltle .exit {
width: 30px;
height: 30px;
background-image: url("../js學(xué)習(xí)/imag/cuohao.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 20px auto;
float: right;
margin-right: 10px;
}
.shade .popwindows .content {
width: 100%;
flex: 3;
line-height: 40px;
font-size: 13px;
margin-left: 10px;
font-family: '宋體';
}
.shade .popwindows .endbtn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex: 1;
border-top: 1px solid #bdb8b8;
}
.shade .popwindows .endbtn .btn{
width: 80px;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 15px;
background-color: #979797;
}
.shade .popwindows .endbtn .btn:nth-child(1){
margin-right: 10px;
}
.shade .popwindows .endbtn .btn:nth-child(2){
margin-right: 10px;
}
.shade .popwindows .endbtn .btn:hover{
background-color: #f68c4e;
}
封裝
<!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" />
<title>Document</title>
<link rel="stylesheet" href="../css/tanchuang.css" />
<script src="../js文件/popwindows.js"></script>
</head>
<body>
<button>添加彈窗</button>
</body>
<script>
var button = document.querySelector("button");
button.onclick = function() {
var args = {
title: "嚴(yán)重警告",
content: "您輸入的內(nèi)容不合法",
confirmDivfn: function() {
var a = document.createElement("div");
a.style.backgroundColor = "red";
a.style.width = "100px";
a.style.height = "100px";
document.body.appendChild(a);
},
cancelfn: function() {
}
};
Alert(args);
};
</script>
</html>/*
var args = {
title:"溫馨提示",
content:"是否添加一個頁面生成一個藍(lán)色div",
confirmDivfn:function(){
var a = document.createElement("div");
a.style.backgroundColor = "red";
a.style.width = "100px";
a.style.height = "100px";
body.appendChild(a);
},
cancelfn:function(){
body.removeChild(shade);
}
}
*/
function Alert(args) {
var shade = document.createElement("div");
shade.className = "shade";
shade.innerHTML =
`
<div class="popwindows">
<div class="tltle">
<div class="text"><h4>` +
args.title +
`</h4></div>
<div class="exit"></div>
</div>
<div class="content"><h5>` +
args.content +
`</h5></div>
<div class="endbtn">
<div class="btn confirm">確定</div>
<div class="btn cancel">取消</div>
</div>
</div>
`;
document.body.appendChild(shade);
var cancel = document.querySelector(".btn.cancel");
var confirmDiv = document.querySelector(".btn.confirm");
confirmDiv.onclick = function() {
/* 此處輸入確認(rèn)事件的內(nèi)容*/
args.confirmDivfn();
document.body.removeChild(shade);
};
cancel.onclick = function() {
/* 此處輸入取消事件的內(nèi)容 */
args.cancelfn();
document.body.removeChild(shade);
};
};css不變
“怎么使用JavaScript封裝彈框插件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼