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.…...
Amazon Q 从入门到实战，AWS 专属 AI 助手超全指南
目录 一、Amazon Q 到底是什么 二、Amazon Q 有两个版本 1、Amazon Q Developer（给开发者/运维） 2、Amazon Q Bussiness（给企业/业务人员） 三、Amazon Q能解决什么实际问题 四、Amazon Q 和 Chat GPT 同类助手的有什么区别 …...
ABAP开发必备：5种处理前导0的实战技巧（附SQL代码示例）
ABAP开发必备：5种处理前导0的实战技巧（附SQL代码示例） 在SAP ABAP开发中，物料号、供应商号等关键字段经常需要处理前导0的问题。这些看似简单的数字格式差异，却可能引发数据查询失败、报表统计错误等一系列"蝴蝶效…...
LingBot-Depth模型优化技巧：处理高分辨率图像的实用方法
LingBot-Depth模型优化技巧：处理高分辨率图像的实用方法 你是不是遇到过这样的情况：拿到一张高分辨率的室内场景照片，兴冲冲地丢给深度估计模型，结果要么显存爆炸，要么生成的效果图边缘模糊、细节丢失，完全…...
OpenClaw社区贡献指南：为Qwen3-14b_int4_awq开发并分享自定义技能
OpenClaw社区贡献指南：为Qwen3-14b_int4_awq开发并分享自定义技能 1. 为什么我们需要更多社区技能 上周我尝试用OpenClaw自动整理电脑里堆积如山的PDF论文时，发现现有的文件处理技能无法识别某些特殊格式的学术文献。这个痛点让我意识到：Op…...
水质评价避坑指南：当DO和NH3-N指标冲突时怎么办？
水质评价指标冲突的智能解法：熵权法实战与多维度决策 当溶解氧（DO）与氨氮（NH3-N）这两项关键水质指标出现评价矛盾时，环保工程师常陷入两难——DO浓度越高通常代表水质越好，而NH3-N数值越低则表明…...
OpenClaw旅行规划专家：Qwen3-14b_int4_awq自动生成行程表与预订提醒
OpenClaw旅行规划专家：Qwen3-14b_int4_awq自动生成行程表与预订提醒 1. 为什么需要AI旅行规划助手 每次计划旅行时，我总会被各种琐事淹没：查天气、比价酒店、确认景点开放时间、安排交通路线……这些重复劳动既耗时又容易出错。直到上个月尝…...
独立站建站成本全解析
独立站建站费用构成独立站的费用主要分为域名注册、主机托管、网站建设、支付接口、营销推广和日常维护等几个部分。每个部分的费用因需求不同而有较大差异。域名注册费用通常在每年10至100美元之间，取决于域名后缀和注册商。常见的.com域名价格在10至20美元/年&…...
Go Channel 缓冲区机制分析
Go Channel 缓冲区机制分析 在Go语言的并发编程中，Channel是协程间通信的核心机制之一。其缓冲区机制的设计直接影响程序的性能和稳定性。理解缓冲区的运作原理，能够帮助开发者更高效地利用Channel，避免死锁或资源浪费。本文将从缓冲区的本质…...
嵌入式IRC客户端库IrcBot：轻量、事件驱动、零malloc
1. 项目概述IrcBot 是一个面向嵌入式与轻量级系统设计的 IRC（Internet Relay Chat）协议客户端库，其核心目标并非替代桌面级 IRC 客户端（如 HexChat、WeeChat），而是为资源受限的嵌入式设备提供可裁剪、可集成…...
OpenClaw自动化写作：Phi-3-vision-128k根据图文素材生成技术博客
OpenClaw自动化写作：Phi-3-vision-128k根据图文素材生成技术博客 1. 为什么需要自动化写作助手 作为一个技术博主，我经常遇到这样的困境：手头积累了大量的代码截图、零散笔记和实验记录，但要把它们整理成一篇结构完整的技术文章…...