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

Posted sugartang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义alert弹框，去掉IP以及端口号提示相关的知识，希望对你有一定的参考价值。

先放一个例子吧

// 因需求增加提示框，樣式需要增加到容易修改的地方
  // 彈框樣式一  沒什麼樣式 去掉了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样式

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

 

以上是关于自定义alert弹框，去掉IP以及端口号提示的主要内容，如果未能解决你的问题，请参考以下文章

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

自定义alert弹框

ios UIWebView自定义Alert风格的弹框

IIS服务器如何去掉隐藏网址后面的端口号？

怎么在域名里面去掉端口号

自定义插件学习-弹框2