自定义alert弹框，去掉IP以及端口号提示

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <button onclick="alert('haha')">點擊</button>

  <script>

    function alert() {

      var myAlertBigBoxIsTrue = document.getElementById('myMLBAlertBigBox');

      console.log(myAlertBigBoxIsTrue);

      if (myAlertBigBoxIsTrue === null) {

        // 創建一個遮罩層

        var bigbox = document.createElement("div");

        bigbox.id = "myMLBAlertBigBox";

        //创建一个大盒子

        var box = document.createElement("div");

        var myspan = document.createElement('span');

        //创建一个关闭按钮

        var button = document.createElement("button");

        bigbox.appendChild(box);

        // 設置遮罩層的樣式

        var bigboxName = {

          "width": "100%",

          "height": "100vh",

          "background-color": "rgba(0,0,0,0.4)",

          "position": "fixed",

          "top": "0",

          "left": "0",

          "z-index": "1000",

          "text-align": "center"

        }

        //给元素添加元素

        for (var k in bigboxName) {

          bigbox.style[k] = bigboxName[k];

        }

        //定义一个对象保存样式

        var boxName = {

          width: "500px",

          height: "180px",

          backgroundColor: "white",

          border: "1px solid rgb(226,222,222)",

          position: "absolute",

          "box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",

          top: "20%",

          "border-radius": "5px",

          left: "50%",

          margin: "-90px 0 0 -250px",

          zIndex: "1001",

          textAlign: "center",

          lineHeight: "180px"

        }

        //给元素添加元素

        for (var k in boxName) {

          box.style[k] = boxName[k];

        }

        //把创建的元素添加到body中

        document.body.appendChild(bigbox);

        //把alert传入的内容添加到box中

        if (arguments[0]) {

          // box.innerHTML = arguments[0];

          myspan.innerHTML = arguments[0];

        }

        // 定義span樣式

        var spanName = {

          "text-align": "left",

          "line-height": "30px",

          "border-radius": "5px",

          "outline": "none",

          "word-break": "break-all",

          "position": "absolute",

          "overflow-y": "auto",

          "overflow": "auto",

          "height": "112px",

          "top": "20px",

          "right": "25px",

          "left": "25px",

        }

        for (var j in spanName) {

          myspan.style[j] = spanName[j];

        }

        // bigbox.appendChild(box);

        box.appendChild(myspan);

        button.innerHTML = "关闭";

        //定义按钮样式

        var btnName = {

          border: "1px solid #ccc",

          backgroundColor: "#fff",

          width: "70px",

          height: "30px",

          textAlign: "center",

          lineHeight: "30px",

          "border-radius": "5px",

          outline: "none",

          position: "absolute",

          bottom: "10px",

          right: "20px",

        }

        for (var j in btnName) {

          button.style[j] = btnName[j];

        }

        //把按钮添加到box中

        box.appendChild(button);

        //给按钮添加单击事件

        button.addEventListener("click", function () {

          bigbox.style.display = "none";

          var idObject = document.getElementById('myMLBAlertBigBox');

          if (idObject != null)

            idObject.parentNode.removeChild(idObject);

        })

      } else {

        return;

      }

    }

    alert('hah1111a')

    alert('hah2222')

    alert('ha3333333')

    alert('ha4444')

  </script>

</body>

</html>

先放一个例子吧

// 因需求增加提示框，樣式需要增加到容易修改的地方

  // 彈框樣式一  沒什麼樣式 去掉了ip地址而已

  alert1(name){

    var iframe = document.createElement("IFRAME");

    iframe.style.display="none";

    iframe.setAttribute("src", 'data:text/plain,');

    document.documentElement.appendChild(iframe);

    window.frames[0].window.alert(name);

    iframe.parentNode.removeChild(iframe);

}

// 彈框樣式一

// 彈框樣式二  粉色的  不好看沒加遮罩層，可以加一個再用

alert2(name){

  　　//创建一个大盒子

    var box = document.createElement("div");

    var myspan = document.createElement('span');

　　//创建一个关闭按钮

    var button = document.createElement("button");

　　//定义一个对象保存样式

    var boxName = {

        width:"500px",

        height:"180px",

        backgroundColor: "#fff1f0",

        border: "1px solid #ffa39e",

        position:"absolute",

        top:"20%",

        "border-radius": "5px",

        left:"50%",

        margin:"-90px 0 0 -250px",

        zIndex:"999",

        textAlign:"center",

        lineHeight:"180px"

    }

　　//给元素添加元素

    for(var k in boxName){

        box.style[k] = boxName[k];

    }

　　//把创建的元素添加到body中

    document.body.appendChild(box);

　　//把alert传入的内容添加到box中

    if(arguments[0]){

        // box.innerHTML = arguments[0];

        myspan.innerHTML = arguments[0];

    }

    // 定義span樣式

    var spanName = {

      "text-align": "left",

    "line-height": "30px",

    "border-radius": "5px",

    "outline": "none",

    "word-break": "break-all",

    "position": "absolute",

    "overflow-y": "auto",

    "overflow": "auto",

    "height": "112px",

    "top": "20px",

    "right": "25px",

    "left": "25px"

    }

    for(var j in spanName){

      myspan.style[j] = spanName[j];

    }

    box.appendChild(myspan);

    button.innerHTML = "关闭";

 　　//定义按钮样式

    var btnName = {

        border:"1px solid #ccc",

        backgroundColor:"#fff",

        width:"70px",

        height:"30px",

        textAlign:"center",

        lineHeight:"30px",

        "border-radius": "5px",

        outline:"none",

        position:"absolute",

        bottom:"10px",

        right:"20px",

    }

    for(var j in btnName){

        button.style[j] = btnName[j];

    }

　　//把按钮添加到box中

    box.appendChild(button);

　　//给按钮添加单击事件

    button.addEventListener("click",function(){

        box.style.display = "none";

    })

  }

  // 彈框樣式二

  // 彈框樣式三  白色的  還行吧  有遮罩層

  alert(name) {

    // 創建一個遮罩層

    var bigbox = document.createElement("div");

    //创建一个大盒子

    var box = document.createElement("div");

    var myspan = document.createElement('span');

    //创建一个关闭按钮

    var button = document.createElement("button");

    bigbox.appendChild(box);

    // 設置遮罩層的樣式

    var bigboxName = {

      "width": "100%",

      "height": "100vh",

      "background-color": "rgba(0,0,0,0.4)",

      "position": "fixed",

      "top": "0",

      "left": "0",

      "z-index": "1000",

      "text-align": "center"

    }

    //给元素添加元素

    for (var k in bigboxName) {

      bigbox.style[k] = bigboxName[k];

    }

    //定义一个对象保存样式

    var boxName = {

      width: "500px",

      height: "180px",

      backgroundColor: "white",

      border: "1px solid rgb(226,222,222)",

      position: "absolute",

      "box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",

      top: "20%",

      "border-radius": "5px",

      left: "50%",

      margin: "-90px 0 0 -250px",

      zIndex: "1001",

      textAlign: "center",

      lineHeight: "180px"

    }

    //给元素添加元素

    for (var k in boxName) {

      box.style[k] = boxName[k];

    }

    //把创建的元素添加到body中

    document.body.appendChild(bigbox);

    //把alert传入的内容添加到box中

    if (arguments[0]) {

      // box.innerHTML = arguments[0];

      myspan.innerHTML = arguments[0];

    }

    // 定義span樣式

    var spanName = {

      "text-align": "left",

      "line-height": "30px",

      "border-radius": "5px",

      "outline": "none",

      "word-break": "break-all",

      "position": "absolute",

      "overflow-y": "auto",

      "overflow": "auto",

      "height": "112px",

      "top": "20px",

      "right": "25px",

      "left": "25px",

    }

    for (var j in spanName) {

      myspan.style[j] = spanName[j];

    }

    // bigbox.appendChild(box);

    box.appendChild(myspan);

    button.innerHTML = "关闭";

    //定义按钮样式

    var btnName = {

      border: "1px solid #ccc",

      backgroundColor: "#fff",

      width: "70px",

      height: "30px",

      textAlign: "center",

      lineHeight: "30px",

      "border-radius": "5px",

      outline: "none",

      position: "absolute",

      bottom: "10px",

      right: "20px",

    }

    for (var j in btnName) {

      button.style[j] = btnName[j];

    }

    //把按钮添加到box中

    box.appendChild(button);

    //给按钮添加单击事件

    button.addEventListener("click", function () {

      bigbox.style.display = "none";

    })

  }

  // 彈框樣式三

// 因需求增加提示框，樣式需要增加到容易修改的地方

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <button onclick="alert('haha')">點擊</button>

  <script>

  function alert(){

　　//创建一个大盒子

    var box = document.createElement("div");

    var myspan = document.createElement('span');

　　//创建一个关闭按钮

    var button = document.createElement("button");

　　//定义一个对象保存样式

    var boxName = {

        width:"500px",

        height:"180px",

        backgroundColor: "#fff1f0",

        border: "1px solid #ffa39e",

        position:"absolute",

        top:"20%",

        "border-radius": "5px",

        left:"50%",

        margin:"-90px 0 0 -250px",

        zIndex:"999",

        textAlign:"center",

        lineHeight:"180px"

    }

　　//给元素添加元素

    for(var k in boxName){

        box.style[k] = boxName[k];

    }

　　//把创建的元素添加到body中

    document.body.appendChild(box);

　　//把alert传入的内容添加到box中

    if(arguments[0]){

        // box.innerHTML = arguments[0];

        myspan.innerHTML = arguments[0];

    }

    // 定義span樣式

    var spanName = {

      "text-align": "left",

    "line-height": "30px",

    "border-radius": "5px",

    "outline": "none",

    "word-break": "break-all",

    "position": "absolute",

    "overflow-y": "auto",

    "overflow": "auto",

    "height": "112px",

    "top": "20px",

    "right": "25px",

    "left": "25px",

    }

    for(var j in spanName){

      myspan.style[j] = spanName[j];

    }

    box.appendChild(myspan);

    button.innerHTML = "关闭";

 　　//定义按钮样式

    var btnName = {

        border:"1px solid #ccc",

        backgroundColor:"#fff",

        width:"70px",

        height:"30px",

        textAlign:"center",

        lineHeight:"30px",

        "border-radius": "5px",

        outline:"none",

        position:"absolute",

        bottom:"10px",

        right:"20px",

    }

    for(var j in btnName){

        button.style[j] = btnName[j];

    }

　　//把按钮添加到box中

    box.appendChild(button);

　　//给按钮添加单击事件

    button.addEventListener("click",function(){

        box.style.display = "none";

    })

}

alert('hahSDFDSFDDSFSDFSDFSDFSDFSDFSDFDSFFSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSa')

  </script>

</body>

</html>

根据项目需求

（修改弹框样式）

(function() {

window.alert = function(name) {

$(".tip").css("display", "block")

$(".tip .content").html(name)

}

})()

调用：alert(name)

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

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

（仅去掉网址）

(function(){

window.alert = function(name){

var iframe = document.createElement("IFRAME");

iframe.style.display="none";

iframe.setAttribute("src", 'data:text/plain');

document.documentElement.appendChild(iframe);

window.frames[0].window.alert(name);

iframe.parentNode.removeChild(iframe);

}

})();

alert('试一试');

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

Window.prototype.alert = function(){

　　//创建一个大盒子

    var box = document.createElement("div");

　　//创建一个关闭按钮

    var button = document.createElement("button");

　　//定义一个对象保存样式

    var boxName = {

        width:"500px",

        height:"180px",

        backgroundColor:"#f8f8f8",

        border:"1px solid #ccc",

        position:"absolute",

        top:"50%",

        left:"50%",

        margin:"-90px 0 0 -250px",

        zIndex:"999",

        textAlign:"center",

        lineHeight:"180px"

    }

　　//给元素添加元素

    for(var k in boxName){

        box.style[k] = boxName[k];

    }

　　//把创建的元素添加到body中

    document.body.appendChild(box);

　　//把alert传入的内容添加到box中

    if(arguments[0]){

        box.innerHTML = arguments[0];

    }

    button.innerHTML = "关闭";

 　　//定义按钮样式

    var btnName = {

        border:"1px solid #ccc",

        backgroundColor:"#fff",

        width:"70px",

        height:"30px",

        textAlign:"center",

        lineHeight:"30px",

        outline:"none",

        position:"absolute",

        bottom:"10px",

        right:"20px",

    }

    for(var j in btnName){

        button.style[j] = btnName[j];

    }

　　//把按钮添加到box中

    box.appendChild(button);

　　//给按钮添加单击事件

    button.addEventListener("click",function(){

        box.style.display = "none";

    })

}

alert("我的好朋友JavaScript```")

转载地址：

https://www.cnblogs.com/lvshuya/p/6549525.html

https://www.cnblogs.com/pssp/p/5246133.html

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

JavaScript实现自定义alert弹框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO
自定义alert弹框，title不显示域名
问题: 系统默认的alert弹框的title会默认显示网页域名解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
自定义alert弹框，title不显示域名(重写alert)
问题: 系统默认的alert弹框的title会默认显示网页域名解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
[转]自定义alert弹框，title不显示域名
//(仅去掉网址) (function(){ window.alert = function(name){ var iframe = document.createElement("IFRA ...
h5弹框去掉ip地址
<script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...
自定义alert弹框
/**************** UIAlertControllerStyleAlert *************************/ /*创建一个可以自定义文字颜色和字体大小的IAler ...
CodePush自定义更新弹框及下载进度条
CodePush 热更新之自定义更新弹框及下载进度先来几张弹框效果图非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码这里的热更新Modal框,是封装 ...
selenium对Alert弹框的多种处理
Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...
python工具 - alert弹框输出姓名年龄、求和
使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和代码部分: # 导入tkinte ...
操作JavaScript的Alert弹框
@Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...

随机推荐

Codeforces Round #826 (Div. 3) A-E
比赛链接 A 题解知识点:模拟. 时间复杂度 $O(n)$ 空间复杂度 $O(n)$ 代码 #include <bits/stdc++.h> #define ll long lo ...
Web自动化---解决登录页面随机验证码问题
一.抛出问题在日常的测试工作中,遇到了这样一个登录页面,如下图: 像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母 ...
.NET 零开销抽象指南
背景 2008 年前后的 Midori 项目试图构建一个以 .NET 为用户态基础的操作系统,在这个项目中有很多让 CLR 以及 C# 的类型系统向着适合系统编程的方向改进的探索,虽然项目最终没有面世 ...
springboot启动问题集合
1.Cannot resolve org.springframework.boot:spring-boot-autoconfigure:2.3.4.RELEASE 首先出现的就是这个问题,由于我之前使 ...
MyBatis&Spring Framrwork
1. MyBatis 1.1 概述 MyBatis是一款优秀的持久层框架,用于简化JDBC开发 MyBatis本是Apache的一个开源项目iBatis,2010年这个项目迁移到了google cod ...
ArchLinux安装手册(2022-10-01)
准备工作镜像下载:北京外国语大学镜像使用ventoy做启动盘: (1) ventoy下载:github下载地址 (2) 解压运行下载好的ventoy,设备选择准备好的U盘(会清空),然后选择安装即 ...
Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建组件库的开发环境. 1 packages 目录前面在项目根目录下创建了 ...
Ubuntu 20.04 开启root权限登陆、网卡配置
个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github‍:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying Ubuntu 20.04 开启root权限登陆.网 ...
图神经网络之预训练大模型结合：ERNIESage在链接预测任务应用
1.ERNIESage运行实例介绍(1.8x版本) 本项目原链接:https://aistudio.baidu.com/aistudio/projectdetail/5097085?contribut ...
Kubernetes(K8S) 配置管理-ConfigMap 介绍
作用:存储不加密数据到 etcd,让 Pod 以变量或者 Volume 挂载到容器中场景:配置文件创建配置文件 redis.properties redis.host=127.0.0.1 redi ...

自定义alert弹框，去掉IP以及端口号提示

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

随机推荐

热门专题