zoukankan      html  css  js  c++  java

  • 自定义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 = {
           "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",
           "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 = {
        "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",
        "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 = {
       "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",
       "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 = {
        "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",
        "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 = {
        "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",
        "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样式

    https://blog.csdn.net/u011511210/article/details/54406226

     
  • 相关阅读:
    24.Spring-Boot-Actuator与Spring-Security整合应用
    Spring Boot 和 Spring 到底有啥区别？用了这么久，你知道吗？
    一文，5 分钟搞明白 MySQL 是如何利用索引的！
    大厂面试必问的Spring全家桶 4 大开源框架，思维脑图全总结，终于出来了
    这些SQL错误用法，如果经常犯，说明你的水平还很low...
    新技能 MyBatis 千万数据表，快速分页！
    牛逼！在IDEA里搞Spring Boot Mybatis反向工程，太爽咯～
    有了 HTTP 协议，为什么还要 RPC 协议，两者有什么区别？
    把 Spring Cloud 给拆了！详解每个组件的作用，值得收藏！
    27个阿里 Java 开源项目，值得收藏！
  • 原文地址：https://www.cnblogs.com/sugartang/p/12468203.html
Copyright © 2011-2022 走看看