javascript页面蒙板,Msgbox,优快云的dialog类,源码

本文链接：https://blog.youkuaiyun.com/sunyujia/article/details/2040696

本文分享了一个从优快云网站上获取的简洁实用的蒙板对话框实现方案，使用JavaScript编写，具备良好的代码质量和易用性，适用于网页弹窗等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天晚上不知道为什么睡不着，最近发现csdn的蒙板对话框做的不错，于是绝定盗之，感觉代码质量还是非常不错的，拿出来分享吧，唯一一点遗憾是不能拖拽。有空改改。

dialog类短小精炼，呵呵。这个类是在userupdate.js中找到的Csdn没用加混淆也没用压缩。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE></TITLE>
<STYLE>
</STYLE>
<script language="javascript">
function dialog()
{
    this.width=450;
    this.height=360;
    this.title_height=20;
    this.html='';
    this.title='';
    var self = this;
    var bgObj,msgObj,titleObj;
    this.close=function()
    {
        document.body.removeChild(document.getElementById("bgDiv"));
        document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));
        document.body.removeChild(document.getElementById("msgDiv"));
    }

    this.show=function()
    {
        var msgw,msgh,bordercolor;
        msgw=self.width;
        msgh=self.height;
        bordercolor="#336699";
        titlecolor="#99CCFF";

        var sWidth,sHeight;
        sWidth=document.body.offsetWidth;
        sHeight=screen.height;
        bgObj=document.createElement("div");
        bgObj.setAttribute('id','bgDiv');
        bgObj.style.position="absolute";
        bgObj.style.top="0";
        bgObj.style.background="#777";
        bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
        bgObj.style.opacity="0.6";
        bgObj.style.left="0";
        bgObj.style.width=sWidth + "px";
        bgObj.style.height=sHeight + "px";
        bgObj.style.zIndex = "10000";
        document.body.appendChild(bgObj);

        msgObj=document.createElement("div")
        msgObj.setAttribute("id","msgDiv");
        msgObj.setAttribute("align","center");
        msgObj.style.background="white";
        msgObj.style.border="1px solid " + bordercolor;
        msgObj.style.position = "absolute";
        msgObj.style.left = "50%";
        msgObj.style.top = "30%";
        msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
        msgObj.style.marginLeft = "-225px" ;
        msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
        msgObj.style.width = msgw + "px";
        msgObj.style.height =msgh + "px";
        msgObj.style.textAlign = "center";
        msgObj.style.lineHeight ="25px";
        msgObj.style.zIndex = "10001";

        titleObj=document.createElement("h4");
        titleObj.setAttribute("id","msgTitle");
        titleObj.setAttribute("align","center");
        titleObj.style.margin="0";
        titleObj.style.padding="3px";
        titleObj.style.background=bordercolor;
        titleObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
        titleObj.style.opacity="0.75";
        titleObj.style.border="1px solid " + bordercolor;
        titleObj.style.height=self.title_height+"px";
        titleObj.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
        titleObj.style.color="white";
        titleObj.style.cursor="pointer";
        titleObj.innerHTML=self.title;
        //titleObj.onclick=function(){self.close();}
        document.body.appendChild(msgObj);
        document.getElementById("msgDiv").appendChild(titleObj);
        var txt=document.createElement("div");
        txt.style.margin="1em 0"
        txt.setAttribute("id","msgTxt");
        txt.innerHTML=self.html;
        document.getElementById("msgDiv").appendChild(txt);
    }
}
function msgBox(){
    var dg=new dialog();
    dg.html="<input type=button onclick='new dialog().close();' value='确定'>";
    dg.width=200;
    dg.height=100;
    dg.title="标题";
    dg.show();
}
</script>
</HEAD>
<BODY>
<input type="button" value="测试一下" onclick="msgBox();">
</BODY>
</HTML>