javascript页面蒙板,Msgbox,CSDN 的dialog类,源码

最新推荐文章于 2022-10-26 20:55:43 发布

sunyujia

最新推荐文章于 2022-10-26 20:55:43 发布

阅读量2k

点赞数

分类专栏： Javascript 文章标签： dialog javascript function div html button

本文链接：https://blog.csdn.net/sunyujia/article/details/2040696

版权

Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

今天晚上不知道为什么睡不着，最近发现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.οnclick=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 οnclick='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 >