JS原生-弹框+阿里巴巴矢量图
效果：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹出框</title><style>.icon {width: 1em;height: 1em;vertical-align: -1.17em;margin-left: 165px;fill: currentColor;overflow: hidden;}#main {width: 100%;height: 100%;background-color: rgba(82, 82, 87, 0.5);display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;display: none;}#box {width: 474px;height: 57px;background: #F0F9EB;border-radius: 6px;position: absolute;/* z-index: 999; */}#stopIt {text-decoration: none;color: #17BE59;float: right;padding-top: 5px;margin-right: 10px;}p {font-size: 22px;font-family: Source Han Sans CN;font-weight: 400;color: #17BE59;margin: -21px 190px;}#box1 {width: 496px;height: 50px;border: 2px solid black;}#box2 {width: 0px;height: 50px;background-color: pink;}</style>
</head><body><script src="../概述/script/iconfont.js"></script><input type="button" value="弹框" id="eject"><div id="main"><div id="box">//对号<svg class="icon" aria-hidden="true"><use xlink:href="#icon-tijiaochenggong"></use></svg>//差号<svg class="icon" id="stopIt" aria-hidden="true"><use xlink:href="#icon-guanbi"></use></svg><p>提交成功</p></div></div><script>let eject = document.getElementById("eject");let main = document.getElementById("main");let stopIt = document.getElementById("stopIt");//点击出现弹框eject.onclick = function () {main.style.display = "flex";}//点击×弹框消失stopIt.onclick = function () {main.style.display = "none";}</script>
</body></html>字体JS文件：cankao
window._iconfont_svg_string_='<svg><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#272536" ></path><path d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955" fill="#272536" ></path><path d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993" fill="#272536" ></path></symbol><symbol id="icon-tijiaochenggong" viewBox="0 0 1024 1024"><path d="M512 0C229.668571 0 0 229.668571 0 512s229.668571 512 512 512 512-229.668571 512-512S794.331429 0 512 0z m307.2 343.771429s-267.702857 295.497143-327.68 365.714285c-59.977143 70.217143-106.788571 0-106.788571 0L210.651429 529.554286s-27.794286-42.422857 21.942857-81.92c46.811429-38.034286 84.845714 0 84.845714 0l122.88 128.731428L746.057143 291.108571s29.257143-20.48 59.977143 5.851429c23.405714 21.942857 13.165714 46.811429 13.165714 46.811429z" fill="#68BF7B" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);参考文档：Js简朴原生实现弹框_原生js弹框_想被带飞的鱼的博客-CSDN博客
相关文章：
JS原生-弹框+阿里巴巴矢量图
效果： 代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…...
vscode c++ 报错identifier “string“ is undefined
vscode c 报identifier “string” is undefined 问题 新装了电脑, 装好vsc和g等, 发现报错 但开头并没问题 解决 shiftctrlp选择 C/C Edit:COnfigurations (JSON)自动生成打开 c_cpp_properties.json添加g路径等 "cStandard": "c11","cppStanda…...
CocoaPods podfile 文件配置
记录一下关于 CocoaPods podfile 文件配置 指定源(Source) 默认情况下，在全局级别指定的源将按照依赖项匹配指定的顺序进行搜索。 对于特定的依赖，可以单独指定依赖源: pod PonyDebugger, :source > https://github.com/CocoaPods/Specs.git使用字库…...
Python大数据之linux学习总结——day10_hive调优
hive调优 hive调优hive命令和参数配置1.hive数据压缩压缩对比开启压缩 2.hive数据存储[练习]行列存储原理存储压缩比拓展dfs -du -h 3. fetch抓取4. 本地模式5. join的优化操作6. 列裁剪7. 分区裁剪8. group by 操作9. count(distinct)10. 笛卡尔积11. 动态分区[练习]12. 如何调…...
原理Redis-动态字符串SDS
动态字符串SDS Redis中保存的Key是字符串，value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串，因为C语言字符串存在很多问题： 获取字符串长度的需要通过运算非二进制安全…...
axios的封装之axios是基于什么封装的？
axios的封装_axios是基于什么封装的 axios是基于JavaScript的XMLHttpRequest 和 Promise 对象进行封装的使用axios发送GET请求的示例axios 拦截器 axios的封装_axios是基于什么封装的 axios是基于JavaScript的XMLHttpRequest 和 Promise 对象进行封装的 在浏览器中ÿ…...
应用软件安全编程-20生成强随机数
JavaAPI 提 供 了java,util.Random 类 来 实 现PRNG。 这 个 PRNG 是可移植和可重复的。因此，如 果 两 个java.util.Random 类的实例使用了相同的种子，会在所有的 Java 实 现 中 生 成 相 同 的 数 值 序 列 。 在应用初始化时，或者在每…...
【C语言.oj刷题】有序#整型矩阵元素查找##{思路+C源码}
目录 题目信息 题目分析： 法一： 遍历二维数组（低效） 思路 源码 局限性 法二： 对每一行二分查找（有所提效） 思路 源码 局限性 法三： 利用一切有利条件使用二分查找 思路 …...
rabbitmq默认交换机锁绑定的routingkey-待研究
例如这个是我的一个消息队列，它默认绑定的交换机是 什么类型呢? 看到这个图，感觉应该是一个默认的交换机，因为是default exchange 于是来到交换机来看看其他默认的交换机： 这里可以看到默认的交换机是direct（应该没…...
【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 4
1、下列哪个选项填到填到下图空缺处最合适 A、 B、 C、 D、 答案：D 2、按照如下图的规律摆放正方形，第 5 堆正方形的个数是 A、13 B、14 C、15 D、16 答案：D 3、从右面观察下面的立体图形，看到的是 A、 B、 C、 D、 答…...
基于STM32CubeMX和keil采用RTC时钟周期唤醒和闹钟实现LED与BEEP周期开关
文章目录 前言1. RTC概念1.1 RTC的时钟信号源1.2 预分频器1.3 实时时钟与日历数据1.4 周期性自动唤醒1.5 可编程闹钟 2. RTC相关中断3. STM32CubeMX配置3.1 时钟配置3.2 引脚配置3.3 RTC配置3.3.1 模式选择3.3.2 RTC基本参数配置3.3 中断配置 4. 代码编写总结 前言 RTC的功能有…...
Virtual安装centos后，xshell连接centos
1. 网络使用Host-Only模式动态分配IP，点确定后，centos 上运行 system restart network ，使用ifconfig查看新的ip，XShell可以直接连上centos， 但是由于使用的是Host-Only模式，centos不能访问网络，…...
Taro.navigateTo 使用URL传参数和目标页面参数获取
文章目录 1. Taro.navigateTo 简介2. 通过 URL 传递参数3. 目标页面参数获取4. 拓展与分析4.1 拓展4.2 URL参数的类型4.3 页面间通信 5. 总结 🎉欢迎来到Java学习路线专栏~Taro.navigateTo 使用URL传参数和目标页面参数获取 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x…...
Unity Meta Quest 一体机开发（七）：配置玩家 Hand Grab 功能
文章目录 📕教程说明📕玩家物体配置 Hand Grab Interactor⭐添加 Hand Grab Interactor 物体⭐激活 Hand Grab Visual 和 Hand Grab Glow⭐更新 Best Hover Interactor Group 📕配置可抓取物体（无抓取手势）⭐刚体和碰撞…...
我又开始贩卖焦虑了，机器视觉兄弟们，打工这生意盘不活了？让人逃离北上广深，是毒鸡汤吗？
我想大多数人和我想的一样，不要质疑自己的出身，也不必用一生去改变出身而获得融入感，思想富足这是我们留给自己一生最珍贵的礼物。也许一线城市容不下肉身，二三线城市容不下灵魂。那我回到生我养我的十八线小县城，这不…...
hyperledger fabric2.4测试网络添加组织数量
!!!修改内容比较繁琐,预期未来提供模板修改 修改初始配置文件,初始添加3个组织 organizations文件夹 /cryptogen文件夹下创建文件crypto-config-org3.yaml,内容如下: PeerOrgs:# ---------------------------------------------------------------------------# Org3# ----…...
分库分表
分库，分表，分库分表 “只分库“，“只分表“，“既分库又分表" 何时分库 在面对高并发的情况下，数据库连接成为性能瓶颈。当数据QPS过高导致数据库连接数不足时，考虑分库。在读多写少的场景下&#x…...
uniapp自定义组件
在UniApp中，你可以使用自定义组件来拓展应用程序的功能和界面。自定义组件是由多个Vue组件构成的，可以在应用程序中重复使用。 要创建一个自定义组件，你需要在UniApp项目中的components目录下创建一个新的文件夹，并在该文件夹中创…...
linux gdb调试
安装gdb yum install gdb -y 查看dump文件所在路径： 可通过 cat /proc/sys/kernel/core_pattern命令获取dump目录路径 gdb调试： 可执行文件为 xxx（例如：main），结合其运行时产生的dump文件进行调试 命令&a…...
java17 linux 环境配置
linux版本 :centos 8 1.能联网的情况下: wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz 2.mkdir /usr/local/java tar zxvf jdk-17_linux-x64_bin.tar.gz -C /usr/local/java 3./etc/profile增加: export JAVA_HOME/usr/local/java/jdk-17.…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「storms…...