代码空间项目 -- alert窗口自定义

标签：

function z_alert(msg){
    //创建提示框盒子，设置盒子的css样式
    var msgBox=document.createElement("div");
    msgBox.style.width="300px";
    msgBox.style.borderRadius="5px";
    msgBox.style.position="fixed";
    msgBox.style.zIndex=100000;
    var maxleft=(window.innerWidth-400)/2;
    msgBox.style.top="100px";
    msgBox.style.left=maxleft+"px";
    

　 //创建遮荫层，背景变暗
    var bg=document.createElement("div");
    bg.style.height=window.innerHeight+"px";
    bg.style.width=window.innerWidth+"px";
    bg.style.position="fixed";
    msgBox.style.zIndex=99999;
    bg.style.top="0px";
    bg.style.left="0px";
    bg.style.background="black";
    bg.style.opacity="0.2";

    //创建标题
    var msgTitle=document.createElement("div");
    msgTitle.style.lineHeight="40px";
    msgTitle.style.borderTopLeftRadius="5px";
    msgTitle.style.borderTopRightRadius="5px";
 　msgTitle.style.background="背景图片地址";
    msgTitle.style.color="#fff";
    msgTitle.style.fontSize="18px";

　 //移动上去鼠标的样式
    msgTitle.style.cursor="move";
    msgTitle.style.textAlign="center";
    var span=document.createElement("span");
    span.innerText="提示";

    //创建内容部分的盒子
    var content=document.createElement("div");
    content.style.height="100px";
    content.style.background="#fff";

    //传入的提示信息参数
    content.innerText=msg;
    content.style.overflowY="auto";
    content.style.textAlign="center";
    content.style.verticalAlign="middle";
    content.style.padding="40px";
    
    //创建盒子底部
    var bottom=document.createElement("div");
    bottom.style.height="30px";
    bottom.style.background="#149BDF";
    bottom.style.padding="5px";
    bottom.style.borderBottomLeftRadius="5px";
    bottom.style.borderBottomRightRadius="5px";
    
    //创建关闭按钮
    var close=document.createElement("div");
    close.innerHTML="确定";
    close.style.cursor="pointer";
    close.style.width="65px";
    close.style.padding="3px 15px";
    close.style.background="#fff";
    close.style.borderRadius="3px";
    close.style.margin="0 auto";
    close.style.textAlign="center";
    close.onclick=function(){
        msgBox.style.visibility="hidden";
        bg.style.visibility="hidden";
    }
    
    //拼接各级元素
    msgBox.appendChild(msgTitle);
    msgTitle.appendChild(span);
    msgBox.appendChild(content);
    msgBox.appendChild(bottom);
    bottom.appendChild(close);
    document.body.appendChild(msgBox);
    document.body.appendChild(bg);
}

代码空间项目 -- alert窗口自定义

标签：

原文地址：http://www.cnblogs.com/zmc-change/p/5381907.html