• JS原生-弹框+阿里巴巴矢量图

    效果：

     代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>弹出框title>
    9.  
    10.     <style>
    11.         .icon {
    12.             width: 1em;
    13.             height: 1em;
    14.             vertical-align: -1.17em;
    15.             margin-left: 165px;
    16.             fill: currentColor;
    17.             overflow: hidden;
    18.         }
    19.  
    20.         #main {
    21.             width: 100%;
    22.             height: 100%;
    23.             background-color: rgba(82, 82, 87, 0.5);
    24.             display: flex;
    25.             justify-content: center;
    26.             align-items: center;
    27.             position: absolute;
    28.             left: 0;
    29.             top: 0;
    30.             display: none;
    31.         }
    32.  
    33.         #box {
    34.             width: 474px;
    35.             height: 57px;
    36.             background: #F0F9EB;
    37.             border-radius: 6px;
    38.             position: absolute;
    39.             /* z-index: 999; */
    40.         }
    41.  
    42.         #stopIt {
    43.             text-decoration: none;
    44.             color: #17BE59;
    45.             float: right;
    46.             padding-top: 5px;
    47.             margin-right: 10px;
    48.         }
    49.  
    50.         p {
    51.             font-size: 22px;
    52.             font-family: Source Han Sans CN;
    53.             font-weight: 400;
    54.             color: #17BE59;
    55.             margin: -21px 190px;
    56.         }
    57.  
    58.         #box1 {
    59.             width: 496px;
    60.             height: 50px;
    61.             border: 2px solid black;
    62.         }
    63.  
    64.         #box2 {
    65.             width: 0px;
    66.             height: 50px;
    67.             background-color: pink;
    68.         }
    69.     style>
    70. head>
    71.  
    72. <body>
    73.     <script src="../概述/script/iconfont.js">script>
    74.     <input type="button" value="弹框" id="eject">
    75.     <div id="main">
    76.         <div id="box">
    77.             //对号
    78.             <svg class="icon" aria-hidden="true">
    79.                 <use xlink:href="#icon-tijiaochenggong">use>
    80.             svg>
    81.             //差号
    82.             <svg class="icon" id="stopIt" aria-hidden="true">
    83.                 <use xlink:href="#icon-guanbi">use>
    84.             svg>
    85.             <p>提交成功p>
    86.         div>
    87.     div>
    88.     <script>
    89.         let eject = document.getElementById("eject");
    90.         let main = document.getElementById("main");
    91.         let stopIt = document.getElementById("stopIt");
    92.         //点击出现弹框
    93.         eject.onclick = function () {
    94.             main.style.display = "flex";
    95.         }
    96.         //点击×弹框消失
    97.         stopIt.onclick = function () {
    98.             main.style.display = "none";
    99.         }
    100.     script>
    101. body>
    102.  
    103. html>

    字体JS文件：cankao

    window._iconfont_svg_string_='',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("")}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博客

  • 相关阅读:
    外贸案例分享：看销冠给客户打电话！
    【Transformers】第 3 章：自动编码语言模型
    代码随想录算法训练营Day36 || leetCode 435. 无重叠区间 || 763.划分字母区间 || 56. 合并区间
    如何通过实际操作来加深对Linux命令和概念的理解？
    [附源码]SSM计算机毕业设计政府项目管理平台JAVA
    LQ0041 特别数的和【进制】
    9月有哪些程序员新书与您相约？
    前端开发工具vscode
    自动化测试测试框架封装改造
    大势所趋！低代码带来开发行业新一轮春风
  • 原文地址：https://blog.csdn.net/qq_45915072/article/details/134440978