JavaScript封裝彈框插件的方法
JavaScript封裝彈框插件的具體代碼,供大家參考,具體內(nèi)容如下
知識(shí)點(diǎn)1、document.querySelector() 方法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素。
注意: querySelector() 方法僅僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素,請(qǐng)使用 querySelectorAll() 方法替代。
querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素,返回 [NodeList] 對(duì)象。
知識(shí)點(diǎn)2、document.createElement() 用于創(chuàng)建一個(gè)元素
知識(shí)點(diǎn)3、innerHTML可獲取或設(shè)置指定元素標(biāo)簽內(nèi)的 html內(nèi)容,從該元素標(biāo)簽的起始位置到終止位置的全部?jī)?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"><h3>溫馨提示</h3></div> ? ? ? ? ? ? ? ? <div class="exit"></div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="content"><h4>是否添加一個(gè)頁(yè)面生成一個(gè)藍(lán)色div</h4></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:"是否添加一個(gè)頁(yè)面生成一個(gè)藍(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"><h3>` + ? ? ? args.title + ? ? ? `</h3></div> ? ? ? ? ? ? ? ? <div class="exit"></div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="content"><h4>` + ? ? ? args.content + ? ? ? `</h4></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不變
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
- vue.js中toast用法及使用toast彈框的實(shí)例代碼
- js自定義彈框插件的封裝
- 輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
- vue.js實(shí)現(xiàn)只彈一次彈框
- js重寫alert事件(避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址)
- js實(shí)現(xiàn)上下左右彈框劃出效果
- 基于layer.js實(shí)現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息
- javascript實(shí)現(xiàn)無(wú)法關(guān)閉的彈框
- JavaScript實(shí)現(xiàn)alert彈框效果
相關(guān)文章
javascript 高級(jí)語(yǔ)法之繼承的基本使用方法示例
這篇文章主要介紹了javascript 高級(jí)語(yǔ)法之繼承的基本使用方法,結(jié)合實(shí)例形式分析了JavaScript繼承的基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11js實(shí)現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡(jiǎn)單方法
在日常開發(fā)中我們可能會(huì)遇到返回的數(shù)據(jù)不能直接使用,而數(shù)據(jù)提供者只給你傳遞二維數(shù)據(jù)格式的數(shù)據(jù),這個(gè)時(shí)候就需要我們做轉(zhuǎn)換,這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組的兩種簡(jiǎn)單方法,需要的朋友可以參考下2023-12-12淺析微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題
這篇文章主要介紹了微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10