最新版例子~~  如果同时多个弹框，只显示第一个

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.   <button onclick="alert('haha')">點擊</button>
  13.   <script>
  14.     function alert() {
  15.       var myAlertBigBoxIsTrue = document.getElementById('myMLBAlertBigBox');
  16.       console.log(myAlertBigBoxIsTrue);
  17.       if (myAlertBigBoxIsTrue === null) {
  18.  
  19.         // 創建一個遮罩層
  20.         var bigbox = document.createElement("div");
  21.         bigbox.id = "myMLBAlertBigBox";
  22.         //创建一个大盒子
  23.         var box = document.createElement("div");
  24.         var myspan = document.createElement('span');
  25.         //创建一个关闭按钮
  26.         var button = document.createElement("button");
  27.  
  28.         bigbox.appendChild(box);
  29.         // 設置遮罩層的樣式
  30.         var bigboxName = {
  31.           "width": "100%",
  32.           "height": "100vh",
  33.           "background-color": "rgba(0,0,0,0.4)",
  34.           "position": "fixed",
  35.           "top": "0",
  36.           "left": "0",
  37.           "z-index": "1000",
  38.           "text-align": "center"
  39.         }
  40.         //给元素添加元素
  41.         for (var k in bigboxName) {
  42.           bigbox.style[k] = bigboxName[k];
  43.         }
  44.         //定义一个对象保存样式
  45.         var boxName = {
  46.           width: "500px",
  47.           height: "180px",
  48.           backgroundColor: "white",
  49.           border: "1px solid rgb(226,222,222)",
  50.           position: "absolute",
  51.           "box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",
  52.           top: "20%",
  53.           "border-radius": "5px",
  54.           left: "50%",
  55.           margin: "-90px 0 0 -250px",
  56.           zIndex: "1001",
  57.           textAlign: "center",
  58.           lineHeight: "180px"
  59.         }
  60.         //给元素添加元素
  61.         for (var k in boxName) {
  62.           box.style[k] = boxName[k];
  63.         }
  64.         //把创建的元素添加到body中
  65.         document.body.appendChild(bigbox);
  66.         //把alert传入的内容添加到box中
  67.         if (arguments[0]) {
  68.           // box.innerHTML = arguments[0];
  69.           myspan.innerHTML = arguments[0];
  70.         }
  71.         // 定義span樣式
  72.         var spanName = {
  73.           "text-align": "left",
  74.           "line-height": "30px",
  75.           "border-radius": "5px",
  76.           "outline": "none",
  77.           "word-break": "break-all",
  78.           "position": "absolute",
  79.           "overflow-y": "auto",
  80.           "overflow": "auto",
  81.           "height": "112px",
  82.           "top": "20px",
  83.           "right": "25px",
  84.           "left": "25px",
  85.  
  86.         }
  87.         for (var j in spanName) {
  88.           myspan.style[j] = spanName[j];
  89.         }
  90.  
  91.         // bigbox.appendChild(box);
  92.         box.appendChild(myspan);
  93.         button.innerHTML = "关闭";
  94.         //定义按钮样式
  95.         var btnName = {
  96.           border: "1px solid #ccc",
  97.           backgroundColor: "#fff",
  98.           width: "70px",
  99.           height: "30px",
  100.           textAlign: "center",
  101.           lineHeight: "30px",
  102.           "border-radius": "5px",
  103.           outline: "none",
  104.           position: "absolute",
  105.           bottom: "10px",
  106.           right: "20px",
  107.  
  108.         }
  109.         for (var j in btnName) {
  110.           button.style[j] = btnName[j];
  111.         }
  112.         //把按钮添加到box中
  113.         box.appendChild(button);
  114.         //给按钮添加单击事件
  115.         button.addEventListener("click", function () {
  116.           bigbox.style.display = "none";
  117.           var idObject = document.getElementById('myMLBAlertBigBox');
  118.           if (idObject != null)
  119.             idObject.parentNode.removeChild(idObject);
  120.         })
  121.       } else {
  122.         return;
  123.       }
  124.     }
  125.     alert('hah1111a')
  126.     alert('hah2222')
  127.     alert('ha3333333')
  128.     alert('ha4444')
  129.   </script>
  130. </body>
  131.  
  132. </html>

先放一个例子吧

  1. // 因需求增加提示框，樣式需要增加到容易修改的地方
  2.   // 彈框樣式一  沒什麼樣式 去掉了ip地址而已
  3.   alert1(name){
  4.     var iframe = document.createElement("IFRAME");
  5.     iframe.style.display="none";
  6.     iframe.setAttribute("src", 'data:text/plain,');
  7.     document.documentElement.appendChild(iframe);
  8.     window.frames[0].window.alert(name);
  9.     iframe.parentNode.removeChild(iframe);
  10. }
  11. // 彈框樣式一
  12. // 彈框樣式二  粉色的  不好看沒加遮罩層，可以加一個再用
  13. alert2(name){
  14.   　　//创建一个大盒子
  15.     var box = document.createElement("div");
  16.     var myspan = document.createElement('span');
  17. 　　//创建一个关闭按钮
  18.     var button = document.createElement("button");
  19. 　　//定义一个对象保存样式
  20.     var boxName = {
  21.         width:"500px",
  22.         height:"180px",
  23.         backgroundColor: "#fff1f0",
  24.         border: "1px solid #ffa39e",
  25.         position:"absolute",
  26.         top:"20%",
  27.         "border-radius": "5px",
  28.         left:"50%",
  29.         margin:"-90px 0 0 -250px",
  30.         zIndex:"999",
  31.         textAlign:"center",
  32.         lineHeight:"180px"
  33.     }
  34. 　　//给元素添加元素
  35.     for(var k in boxName){
  36.         box.style[k] = boxName[k];
  37.     }
  38. 　　//把创建的元素添加到body中
  39.     document.body.appendChild(box);
  40. 　　//把alert传入的内容添加到box中
  41.     if(arguments[0]){
  42.         // box.innerHTML = arguments[0];
  43.         myspan.innerHTML = arguments[0];
  44.     }
  45.     // 定義span樣式
  46.     var spanName = {
  47.       "text-align": "left",
  48.     "line-height": "30px",
  49.     "border-radius": "5px",
  50.     "outline": "none",
  51.     "word-break": "break-all",
  52.     "position": "absolute",
  53.     "overflow-y": "auto",
  54.     "overflow": "auto",
  55.     "height": "112px",
  56.     "top": "20px",
  57.     "right": "25px",
  58.     "left": "25px"
  59.     }
  60.     for(var j in spanName){
  61.       myspan.style[j] = spanName[j];
  62.     }
  63.     box.appendChild(myspan);
  64.     button.innerHTML = "关闭";
  65.  　　//定义按钮样式
  66.     var btnName = {
  67.         border:"1px solid #ccc",
  68.         backgroundColor:"#fff",
  69.         width:"70px",
  70.         height:"30px",
  71.         textAlign:"center",
  72.         lineHeight:"30px",
  73.         "border-radius": "5px",
  74.         outline:"none",
  75.         position:"absolute",
  76.         bottom:"10px",
  77.         right:"20px",
  78.  
  79.     }
  80.     for(var j in btnName){
  81.         button.style[j] = btnName[j];
  82.     }
  83. 　　//把按钮添加到box中
  84.     box.appendChild(button);
  85. 　　//给按钮添加单击事件
  86.     button.addEventListener("click",function(){
  87.         box.style.display = "none";
  88.     })
  89.   }
  90.   // 彈框樣式二
  91.   // 彈框樣式三  白色的  還行吧  有遮罩層
  92.   alert(name) {
  93.     // 創建一個遮罩層
  94.     var bigbox = document.createElement("div");
  95.     //创建一个大盒子
  96.     var box = document.createElement("div");
  97.     var myspan = document.createElement('span');
  98.     //创建一个关闭按钮
  99.     var button = document.createElement("button");
  100.  
  101.     bigbox.appendChild(box);
  102.     // 設置遮罩層的樣式
  103.     var bigboxName = {
  104.       "width": "100%",
  105.       "height": "100vh",
  106.       "background-color": "rgba(0,0,0,0.4)",
  107.       "position": "fixed",
  108.       "top": "0",
  109.       "left": "0",
  110.       "z-index": "1000",
  111.       "text-align": "center"
  112.     }
  113.     //给元素添加元素
  114.     for (var k in bigboxName) {
  115.       bigbox.style[k] = bigboxName[k];
  116.     }
  117.     //定义一个对象保存样式
  118.     var boxName = {
  119.       width: "500px",
  120.       height: "180px",
  121.       backgroundColor: "white",
  122.       border: "1px solid rgb(226,222,222)",
  123.       position: "absolute",
  124.       "box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",
  125.       top: "20%",
  126.       "border-radius": "5px",
  127.       left: "50%",
  128.       margin: "-90px 0 0 -250px",
  129.       zIndex: "1001",
  130.       textAlign: "center",
  131.       lineHeight: "180px"
  132.     }
  133.     //给元素添加元素
  134.     for (var k in boxName) {
  135.       box.style[k] = boxName[k];
  136.     }
  137.     //把创建的元素添加到body中
  138.     document.body.appendChild(bigbox);
  139.     //把alert传入的内容添加到box中
  140.     if (arguments[0]) {
  141.       // box.innerHTML = arguments[0];
  142.       myspan.innerHTML = arguments[0];
  143.     }
  144.     // 定義span樣式
  145.     var spanName = {
  146.       "text-align": "left",
  147.       "line-height": "30px",
  148.       "border-radius": "5px",
  149.       "outline": "none",
  150.       "word-break": "break-all",
  151.       "position": "absolute",
  152.       "overflow-y": "auto",
  153.       "overflow": "auto",
  154.       "height": "112px",
  155.       "top": "20px",
  156.       "right": "25px",
  157.       "left": "25px",
  158.  
  159.     }
  160.     for (var j in spanName) {
  161.       myspan.style[j] = spanName[j];
  162.     }
  163.  
  164.     // bigbox.appendChild(box);
  165.     box.appendChild(myspan);
  166.     button.innerHTML = "关闭";
  167.     //定义按钮样式
  168.     var btnName = {
  169.       border: "1px solid #ccc",
  170.       backgroundColor: "#fff",
  171.       width: "70px",
  172.       height: "30px",
  173.       textAlign: "center",
  174.       lineHeight: "30px",
  175.       "border-radius": "5px",
  176.       outline: "none",
  177.       position: "absolute",
  178.       bottom: "10px",
  179.       right: "20px",
  180.  
  181.     }
  182.     for (var j in btnName) {
  183.       button.style[j] = btnName[j];
  184.     }
  185.     //把按钮添加到box中
  186.     box.appendChild(button);
  187.     //给按钮添加单击事件
  188.     button.addEventListener("click", function () {
  189.       bigbox.style.display = "none";
  190.     })
  191.   }
  192.   // 彈框樣式三
  193. // 因需求增加提示框，樣式需要增加到容易修改的地方
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   <button onclick="alert('haha')">點擊</button>
  11.   <script>
  12.   function alert(){
  13. 　　//创建一个大盒子
  14.     var box = document.createElement("div");
  15.     var myspan = document.createElement('span');
  16. 　　//创建一个关闭按钮
  17.     var button = document.createElement("button");
  18. 　　//定义一个对象保存样式
  19.     var boxName = {
  20.         width:"500px",
  21.         height:"180px",
  22.         backgroundColor: "#fff1f0",
  23.         border: "1px solid #ffa39e",
  24.         position:"absolute",
  25.         top:"20%",
  26.         "border-radius": "5px",
  27.         left:"50%",
  28.         margin:"-90px 0 0 -250px",
  29.         zIndex:"999",
  30.         textAlign:"center",
  31.         lineHeight:"180px"
  32.     }
  33. 　　//给元素添加元素
  34.     for(var k in boxName){
  35.         box.style[k] = boxName[k];
  36.     }
  37. 　　//把创建的元素添加到body中
  38.     document.body.appendChild(box);
  39. 　　//把alert传入的内容添加到box中
  40.     if(arguments[0]){
  41.         // box.innerHTML = arguments[0];
  42.         myspan.innerHTML = arguments[0];
  43.     }
  44.     // 定義span樣式
  45.     var spanName = {
  46.       "text-align": "left",
  47.     "line-height": "30px",
  48.     "border-radius": "5px",
  49.     "outline": "none",
  50.     "word-break": "break-all",
  51.     "position": "absolute",
  52.     "overflow-y": "auto",
  53.     "overflow": "auto",
  54.     "height": "112px",
  55.     "top": "20px",
  56.     "right": "25px",
  57.     "left": "25px",
  58.  
  59.     }
  60.     for(var j in spanName){
  61.       myspan.style[j] = spanName[j];
  62.     }
  63.     box.appendChild(myspan);
  64.     button.innerHTML = "关闭";
  65.  　　//定义按钮样式
  66.     var btnName = {
  67.         border:"1px solid #ccc",
  68.         backgroundColor:"#fff",
  69.         width:"70px",
  70.         height:"30px",
  71.         textAlign:"center",
  72.         lineHeight:"30px",
  73.         "border-radius": "5px",
  74.         outline:"none",
  75.         position:"absolute",
  76.         bottom:"10px",
  77.         right:"20px",
  78.  
  79.     }
  80.     for(var j in btnName){
  81.         button.style[j] = btnName[j];
  82.     }
  83. 　　//把按钮添加到box中
  84.     box.appendChild(button);
  85. 　　//给按钮添加单击事件
  86.     button.addEventListener("click",function(){
  87.         box.style.display = "none";
  88.     })
  89. }
  90. alert('hahSDFDSFDDSFSDFSDFSDFSDFSDFSDFDSFFSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSa')
  91.   </script>
  92. </body>
  93. </html>

根据项目需求

（修改弹框样式）

  1. (function() {
  2. window.alert = function(name) {
  3. $(".tip").css("display", "block")
  4. $(".tip .content").html(name)
  5. }
  6. })()

调用：alert(name)

在页面中添加弹框元素，自定义其样式，默认隐藏

注：alert()方法重写，不能传多余参数

（仅去掉网址）

  1. (function(){
  2. window.alert = function(name){
  3. var iframe = document.createElement("IFRAME");
  4. iframe.style.display="none";
  5. iframe.setAttribute("src", 'data:text/plain');
  6. document.documentElement.appendChild(iframe);
  7. window.frames[0].window.alert(name);
  8. iframe.parentNode.removeChild(iframe);
  9. }
  10. })();
  11. alert('试一试');

第三种方法（自定义样式哦~~）

  1. Window.prototype.alert = function(){
  2. 　　//创建一个大盒子
  3.     var box = document.createElement("div");
  4. 　　//创建一个关闭按钮
  5.     var button = document.createElement("button");
  6. 　　//定义一个对象保存样式
  7.     var boxName = {
  8.         width:"500px",
  9.         height:"180px",
  10.         backgroundColor:"#f8f8f8",
  11.         border:"1px solid #ccc",
  12.         position:"absolute",
  13.         top:"50%",
  14.         left:"50%",
  15.         margin:"-90px 0 0 -250px",
  16.         zIndex:"999",
  17.         textAlign:"center",
  18.         lineHeight:"180px"
  19.     }
  20. 　　//给元素添加元素
  21.     for(var k in boxName){
  22.         box.style[k] = boxName[k];
  23.     }
  24. 　　//把创建的元素添加到body中
  25.     document.body.appendChild(box);
  26. 　　//把alert传入的内容添加到box中
  27.     if(arguments[0]){
  28.         box.innerHTML = arguments[0];
  29.     }
  30.     button.innerHTML = "关闭";
  31.  　　//定义按钮样式
  32.     var btnName = {
  33.         border:"1px solid #ccc",
  34.         backgroundColor:"#fff",
  35.         width:"70px",
  36.         height:"30px",
  37.         textAlign:"center",
  38.         lineHeight:"30px",
  39.         outline:"none",
  40.         position:"absolute",
  41.         bottom:"10px",
  42.         right:"20px",
  43.     }
  44.     for(var j in btnName){
  45.         button.style[j] = btnName[j];
  46.     }
  47. 　　//把按钮添加到box中
  48.     box.appendChild(button);
  49. 　　//给按钮添加单击事件
  50.     button.addEventListener("click",function(){
  51.         box.style.display = "none";
  52.     })
  53. }
  54.  
  55. alert("我的好朋友JavaScript```")

自定义alert弹框，去掉IP以及端口号提示的更多相关文章

  1. JavaScript实现自定义alert弹框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO

  2. 自定义alert弹框，title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  3. 自定义alert弹框，title不显示域名(重写alert)

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  4. [转]自定义alert弹框，title不显示域名

    //(仅去掉网址) (function(){ window.alert = function(name){ var iframe = document.createElement("IFRA ...

  5. h5弹框去掉ip地址

    <script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...

  6. 自定义alert弹框

    /**************** UIAlertControllerStyleAlert *************************/ /*创建一个 可以自定义文字颜色和字体大小的IAler ...

  7. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  8. selenium对Alert弹框的多种处理

    Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...

  9. python工具 - alert弹框输出姓名年龄、求和

    使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...

  10. 操作JavaScript的Alert弹框

    @Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...

随机推荐

  1. 【JavaSE】抽象类、接口

    接口的诞生 接口其实就是一种标准一种规范. 先从生活中的例子讲起,理解含义和概念后,再去理解程序会更容易理解一些. 生活中接口无处不在,比如著名的USB接口,大家可以试想一下,如果没有像USB这种统一 ...

  2. 【单片机入门】(三)应用层软件开发的单片机学习之路-----UART串口通讯和c#交互

    引言 在第一章博客中,我们讲了Arduino对Esp32的一个环境配置,以及了解到了常用的一个总线通讯协议,其中有SPI,IIC,UART等,今天我为大家带来UART串口通讯和c#串口进行通讯的一个案 ...

  3. Ignite实战

    1.概述 本篇博客将对Ignite的基础环境.集群快照.分布式计算.SQL查询与处理.机器学习等内容进行介绍. 2.内容 2.1 什么是Ignite? 在学习Ignite之前,我们先来了解一下什么是I ...

  4. 关于Docker的一些事--Docker-Compose 升级版本

    起源 近来一直在研究怎么搭建自己的私有网盘,本着虚心耐心,认真求是态度,开始做起了实验,最终种草了Nextcloud这款开源网盘,然而用私人的服务器感觉很卡,故转战到了一个基友的服务器,感觉非常吊! ...

  5. 【项目】AtCoder for Chinese

    前排提示:Github 内容搭配梯子食用效果更佳( 项目地址 网页 插件安装 Join us or Give us a star ! 注:因内容迁移,下列链接暂时失效(用空再搬一遍)qwq Trans ...

  6. 有趣的 Go HttpClient 超时机制

    hello,大家好呀,我是既写 Java 又写 Go 的小楼,在写 Go 的过程中经常对比这两种语言的特性,踩了不少坑,也发现了不少有意思的地方,今天就来聊聊 Go 自带的 HttpClient 的超 ...

  7. 详解Native Memory Tracking之追踪区域分析

    摘要:本篇图文将介绍追踪区域的内存类型以及 NMT 无法追踪的内存. 本文分享自华为云社区<[技术剖析]17. Native Memory Tracking 详解(3)追踪区域分析(二)> ...

  8. 聊聊Go里面的闭包

    以前写 Java 的时候,听到前端同学谈论闭包,觉得甚是新奇,后面自己写了一小段时间 JS,虽只学到皮毛,也大概了解到闭包的概念,现在工作常用语言是 Go,很多优雅的代码中总是有闭包的身影,看来不了解 ...

  9. 重要内置函数、常见内置函数、可迭代对象、迭代器对象、for循环的本质、异常捕获处理

    重要内置函数 #zip拉链 zip 函数是可以接收多个可迭代对象,然后把每个可迭代对象中的第i个元素组合在一起,形成一个新的迭代器,类型为元组. l1 = [11, 22, 33] l2 = ['a' ...

  10. Python: 对程序做性能分析及计时统计

    1.对整个程序的性能分析 如果只是想简单地对整个程序做计算统计,通常使用UNIX下的time命令就足够了. (base) ➜ Learn-Python time python someprogram. ...