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.…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）
一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...
 Module Federation：Webpack.config.js文件中每个属性的含义解释)
MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例，Webpack.config.js它可能的配置和含义如下： 前言 Module Federation 的Webpack.config.js核心配置包括： name filename（定义应用标识） remotes（引用远程模块࿰…...