JavaScript封裝彈框插件的方法
JavaScript封裝彈框插件的具體代碼,供大家參考,具體內容如下
知識點1、document.querySelector() 方法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意: querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素,請使用 querySelectorAll() 方法替代。
querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素,返回 [NodeList] 對象。
知識點2、document.createElement() 用于創(chuàng)建一個元素
知識點3、innerHTML可獲取或設置指定元素標簽內的 html內容,從該元素標簽的起始位置到終止位置的全部內容(包含html標簽)。
<!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>是否添加一個頁面生成一個藍色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學習/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: "嚴重警告", ? ? ? ? content: "您輸入的內容不合法", ? ? ? ? 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:"是否添加一個頁面生成一個藍色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() { ? ? ? /* 此處輸入確認事件的內容*/ ? ? ? args.confirmDivfn(); ? ? ? document.body.removeChild(shade); ? ? }; ? ? cancel.onclick = function() { ? ? ? /* 此處輸入取消事件的內容 */ ? ? ? args.cancelfn(); ? ? ? document.body.removeChild(shade); ? ? }; ? };
css不變
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js實現(xiàn)一維數(shù)組轉化為二維數(shù)組兩種簡單方法
在日常開發(fā)中我們可能會遇到返回的數(shù)據(jù)不能直接使用,而數(shù)據(jù)提供者只給你傳遞二維數(shù)據(jù)格式的數(shù)據(jù),這個時候就需要我們做轉換,這篇文章主要給大家介紹了關于js實現(xiàn)一維數(shù)組轉化為二維數(shù)組的兩種簡單方法,需要的朋友可以參考下2023-12-12