欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript封裝彈框插件的方法

 更新時(shí)間:2022年08月23日 11:13:50   作者:可可鴨~??于?2021-11-20?20:32:51?發(fā)布??452  
這篇文章主要為大家詳細(xì)介紹了JavaScript封裝彈框插件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序 下拉刷新及上拉加載原理解析

    微信小程序 下拉刷新及上拉加載原理解析

    這篇文章主要介紹了微信小程序 下拉刷新及上拉加載實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • 微信小程序選擇圖片控件

    微信小程序選擇圖片控件

    這篇文章主要為大家詳細(xì)介紹了微信小程序選擇圖片控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • js實(shí)現(xiàn)圖片左右滾動(dòng)效果

    js實(shí)現(xiàn)圖片左右滾動(dòng)效果

    本文主要介紹了js實(shí)現(xiàn)圖片左右滾動(dòng)效果的實(shí)例,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • javascript 高級(jí)語(yǔ)法之繼承的基本使用方法示例

    javascript 高級(jí)語(yǔ)法之繼承的基本使用方法示例

    這篇文章主要介紹了javascript 高級(jí)語(yǔ)法之繼承的基本使用方法,結(jié)合實(shí)例形式分析了JavaScript繼承的基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下
    2019-11-11
  • 移動(dòng)適配的幾種方案(三種方案)

    移動(dòng)適配的幾種方案(三種方案)

    本文給大家總結(jié)了三種移動(dòng)適配方案,具體哪三種感興趣的朋友可以通過(guò)本文詳細(xì)學(xué)習(xí)下
    2016-11-11
  • js實(shí)現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡(jiǎn)單方法

    js實(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
  • 本人自用的global.js庫(kù)源碼分享

    本人自用的global.js庫(kù)源碼分享

    這篇文章主要介紹了本人自用的global.js庫(kù)源碼分享,源碼中包含常用WEB操作,如命名空間、DOM操作、數(shù)據(jù)判斷、Cookie操作等功能,需要的朋友可以參考下
    2015-02-02
  • 關(guān)于在LayUI中使用AJAX提交巨坑記錄

    關(guān)于在LayUI中使用AJAX提交巨坑記錄

    今天小編就為大家分享一篇關(guān)于在LayUI中使用AJAX提交巨坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-10-10
  • 基于Echarts實(shí)現(xiàn)餅圖效果

    基于Echarts實(shí)現(xiàn)餅圖效果

    這篇文章主要為大家詳細(xì)介紹了基于Echarts實(shí)現(xiàn)餅圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 淺析微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題

    淺析微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題

    這篇文章主要介紹了微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-10-10

最新評(píng)論