JavaScript
搜索
分类

JavaScript封装弹框插件的方法

作者：可可鸭~??于?2021-11-20?20:32:51?发布??452 时间：2024-04-30 10:20:32　

JavaScript封装弹框插件的具体代码，供大家参考，具体内容如下

知识点1、document.querySelector() 方法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 [NodeList] 对象。

知识点2、document.createElement() 用于创建一个元素

知识点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;
}

JavaScript封装弹框插件的方法

封装

<!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不变

JavaScript封装弹框插件的方法

来源：https://blog.csdn.net/qq_43547255/article/details/121444775

标签：js,弹框插件
0
投稿

猜你喜欢

  • Python3创建Django项目的几种方法(3种)

    2021-12-28 00:41:44

  • Python编程快速上手——疯狂填词程序实现方法分析

    2023-07-25 08:57:17

  • numpy使用技巧之数组过滤实例代码

    2021-07-13 14:55:52

  • Python爬虫学习之requests的使用教程

    2021-04-25 19:06:07

  • 微信 java 实现js-sdk 图片上传下载完整流程

    2024-04-29 14:08:03

  • ASP连接MySQL数据库代码示例2

    2010-03-08 14:26:00

  • 简单谈谈Python面向对象的相关知识

    2022-08-25 19:11:23

  • 关于获取HTML元素的CSS属性值函数

    2008-09-01 13:20:00

  • python中类变量与成员变量的使用注意点总结

    2022-01-08 03:39:51

  • MySQL数据库的临时文件究竟储存在哪里

    2009-02-13 13:44:00

  • BootStrap tooltip提示框使用小结

    2023-07-02 05:25:25

  • python实现同时给多个变量赋值的方法

    2021-10-09 07:02:50

  • Python爬虫headers处理及网络超时问题解决方案

    2022-11-19 23:38:34

  • SqlServer 2005 简单的全文检索

    2024-01-18 05:00:31

  • python图像常规操作

    2022-12-28 18:21:52

  • python3 批量获取对应端口服务的实例

    2021-07-14 11:52:05

  • 实现两个文本框同时输入的实例

    2024-04-16 08:46:27

  • Javascript网页抢红包外挂实现分享

    2024-04-16 09:36:02

  • oracle数据库sql的优化总结

    2024-01-23 16:05:11

  • C#使用正则表达式实例

    2024-05-13 09:16:48
    • asp之家 网络编程 m.aspxhome.com