JavaScript封装弹框插件的方法
作者：可可鸭~??于?2021-11-20?20:32:51?发布??452 发布时间：2024-04-30 10:20:32
标签：js,弹框插件
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;
}
封装
<!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不变
来源：https://blog.csdn.net/qq_43547255/article/details/121444775
0
投稿猜你喜欢
- 1 JSON 文件存储JSON，全称为 JavaScript Object Notation, 也就是 JavaScript 对象标记，它通
如果希望重新定义在表中添加新记录时该列中自动生成并存储于列中的序列号，则可以更改该列的标识属性。在每个表中只能设置一个列的标识属性。具有标识- 如何最准确地统计在线用户数？我们推荐的这个程序据说是目前最好的在线用户数量统计程序。代码如下：'首先要设置好global.asa&n
- 本文我们讲述通过 array_unique()函数删除数组中重复元素。array_unique()函数，将数组元素的值作为字符串排序，然后对
- 支持向量机（Support Vector Machine, SVM）是一类按监督学习（supervised learning）方式对数据进行
- 1、关于 StatsModelsstatsmodels（http://www.statsmodels.org）是一个Python库，用于拟合
- 文本框 textarea 限制输入文字个数的的javascript代码，我们经常在评论留言页面我们需要在客户端限制访客的留言长度，当然最好我
- 流行的 JavaScript 库有jQuery，MooTools，Prototype，Dojo和YUI等，这些 JavaScript 库功能
- 交叉表（cross-tabulation，简称crosstab）是⼀种⽤于计算分组频率的特殊透视表。语法详解：pd.crosstab(ind
- 可是，其体积仍然很庞大。所以，在日常工作中，如何给SQL Server的备份文件瘦身，就是很多数据库管理员所关心的问题了。 也许微软的数据库
- 本文实例为大家分享了vue.js实现简易折叠面板的具体代码，供大家参考，具体内容如下代码如下：主文件：app.vue<template
- 说下整体思路1、服务器安装ffmpeg2、使用ffmpeg -i 指令来转换amr为mp3格式（这个到时候写在PHP代码中，使用exec函数
- // NewTimer creates a new Timer that will send// the current time on i
- 本文讲述了Java数据类型与MySql数据类型对照表。分享给大家供大家参考，具体如下：类型名称显示长度数据库类型JAVA类型JDBC类型索引
- 通过python的os模块获取windows或者linux主机名的通用函数。#!/usr/bin/env python #cod
- 前言：常见的加密算法基本分为这几类：线性散列算法（签名算法）MD5，sha1对称性加密算法 AES DES非对称性加密算法 RSA一、md5
- 一、实例演示1.将一个大Excel等份拆成多个Excel2.将多个小Excel合并成一个大Excel并标记来源work_dir="
- 以下是引用片段： ImportsSystem.Data ImportsSystem.Data.SqlClient PublicClassFo
- 这篇文章主要介绍了Python实现自定义读写分离代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 0. 前言数据处理过程中，可视化可以更直观得感受数据，因此打算结合自己的一些实践经理，以效果为准写这篇博客。内容应该会不断扩充。1. mat
