zoukankan      html  css  js  c++  java
  • 重写原生alert,弹出层过一会就消失

    window.alert = function(str) {
    if(document.querySelectorAll("div.shieldClass").length!=0){
    return false;
    }
    // 遮罩层
    var shield = document.createElement("DIV");
    shield.className = "shieldClass";
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "0px";
    shield.style.top = "0px";
    shield.style.width = "100%";
    shield.style.height = "100%";
    //弹出对话框时的背景颜色
    shield.style.background = "#111";
    shield.style.textAlign = "center";
    shield.style.zIndex = "25000";
    shield.style.opacity = "0.4";
    //背景透明 IE有效
    var alertFram = document.createElement("DIV");
    alertFram.className = "alertFramClass";
    alertFram.id = "alertFram";
    alertFram.style.position = "absolute";
    alertFram.style.left = "50%";
    alertFram.style.top = "40%";
    alertFram.style.background = "rgba(0,0,0,0.7)";
    alertFram.style.textAlign = "center";
    alertFram.style.zIndex = "25001";
    alertFram.style.borderRadius="6px";
    strHtml = "<p style='text-align:center;padding:15px 15px;font-size:12px;font-weight: normal;color:#fff'>" + str +"</p>"
    alertFram.innerHTML = strHtml;
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    var o = document.getElementById("alertFram");
    var body=document.getElementsByTagName("body")[0]
    var w = o.offsetWidth; //宽度
    o.style.marginLeft="-"+w/2+"px";
    setTimeout(function(){
    var shieldDom=document.querySelectorAll("div.shieldClass");
    var alertFramDom=document.querySelectorAll("div.alertFramClass");
    for(var i=0;i<shieldDom.length;i++){
    body.removeChild(shieldDom[i]);
    };
    for(var j=0;j<alertFramDom.length;j++){
    body.removeChild(alertFramDom[j]);
    };
    },1000);

    }

  • 相关阅读:
    设计模式之命令模式
    设计模式之享元模式
    设计模式之建造者模式
    设计模式之策略模式
    设计模式之责任链模式
    maven打包三种方式
    java native:Java本地方法调用(jni方式)
    数据库五大约束使用方法
    数据库连接池的配置方式(阿里,日本)
    tomcat数据库连接池的几种配置方法
  • 原文地址:https://www.cnblogs.com/binmengxue/p/9639171.html
Copyright © 2011-2022 走看看