JS对话框

最新推荐文章于 2022-08-05 19:42:07 发布

__都付笑谈中

最新推荐文章于 2022-08-05 19:42:07 发布

阅读量724

点赞数

本文链接：https://blog.csdn.net/a759478257/article/details/8996128

版权

1. [代码][JavaScript]代码

 
    01 var zDialog=function(div,w,h,l,r,title,modal)
 
    02    {
 
    03        this.div=div;
 
    04        this.w=w;
 
    05        this.h=h;
 
    06        this.title=title;
 
    07        this.l=l;
 
    08        this.r=r;
 
    09        this.dialog=document.getElementById(this.div).innerHTML;
 
    10         
 
    11        function closeBox()
 
    12        {
 
    13           document.getElementById(this.div).style.display="none";
 
    14        }
 
    15         
 
    16        this.open=function()
 
    17        {
 
    18            var container ='<div id="dialog-top" style=" background-color: blue;background-image: linear-gradient(bottom, rgb(128,128,128) 0%, rgb(143,140,143) 0%, rgb(5,5,5) 79%); background-image: -o-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(143,140,143) 0%, rgb(5,5,5) 79%); background-image: -moz-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(143,140,143) 0%, rgb(5,5,5) 79%); background-image: -webkit-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(143,140,143) 0%, rgb(5,5,5) 79%);background-image: -ms-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(143,140,143) 0%, rgb(5,5,5) 79%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(128,128,128)), color-stop(0, rgb(143,140,143)), color-stop(0.79, rgb(5,5,5)) );height: 25px;">';
 
    19            container+='<div id="dialog-title" style=" float: left; padding-left: 10px;color: #FFF; font-size: 12px; padding-top: 5px; padding-bottom: 5px;">'+this.title+'</div>';
 
    20            container+=' <div id="dialog-close" style=" padding-top: 5px; float: right;padding-right: 10px;">';
 
    21            container+=' <a href="javascript:close()"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAQAAAAEABcxq3DAAACeklEQVQ4y61TTUhUURT+7r3z3sxTn77GUbR0zDRzAkWFNmWEtKmgQPAHF0q7IKMQ7WdhkKvoB3LRomUQQosMFYLEGfqhaBEqisi0GQzUyMAQRnwz7557W6Smhtiib3nO9x3O93EO8L/QDURGGOs7DfDdOO1Aboyx/otAcFujDzjxrajoh1tfr9+Z5tMzgNgp7gBCcceZdBsa9KzjjLcBDrBOvJeRMVBcWxvRpon9oVBN2dJSWYJo+CugN8Q3HWespK6uRhsGHNsuxMLCyiDwQQDAiufFalZWzmcFg0Hl86EgGKwuWV6umJdy+BRjuT05OdFwVVWNYgxqdRVT09MjjzyvKwEotumPsaIex4keqKg4wjiHXlvDeDz+Ms80y8OVldVMCOhUCjPx+MjdtbXmUa3TAMC2+mzivPC6bcfCpaURxjm05wFCgHEOnUphOpEYeuC6rdF18WYGG5jVOrngeS+OJpNn7czMfKU1FBEolcLE3NzQfddteaO1t1Xj25l2sRCFfsZCKdf9U1QKWZyXh4XIg5SLW/nbNrhqmic7AoFR27ZDJCXI80BSgpRClt+fXy5low94NanUz78GdPv951oMYyTg99tEBOl5mE0mXy+77vdsIKyUgmUY+w4TNQWEGBsnWtoccCsQaLvA+XMf5wEiAnkeJqR89jidbvtINFCsdSRIFCEimJzb5Vq3Zvt87z9LOS+OG8bBS8BbprVBRCAi/Ymxh0/S6c4pIlrUWn5RajBPiGCBlMeIiPm0tg4x1jyjdf/vU7asOzEhVFQIum1ZXbv9Qq9l3YgKQTEhVK9lXdnWvGZZ7Z2W1bjX0122rOaejIz2vXj/jF8l5A/Mk+JCIgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMC0wMi0xMVQwMToyMDoyMS0wNjowMLWZ06AAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMDYtMTAtMDFUMDA6NTY6NTYtMDU6MDCfVwmEAAAAAElFTkSuQmCC" style="border:0px" /></a>';
 
    22            container+='</div></div>';
 
    23            container+=' <div id="dialog-content" style="font-size: 12px;padding: 20px;">';
 
    24            container+=this.dialog;
 
    25            container+='</div>';
 
    26            document.getElementById(this.div).innerHTML=container;
 
    27            document.getElementById(this.div).style.height=h+"px";
 
    28            document.getElementById(this.div).style.width=w+"px";
 
    29            document.getElementById(this.div).style.left=l+"px";
 
    30            document.getElementById(this.div).style.right=r+"px";
 
    31             
 
    32            //创建遮罩层
 
    33            var objScreen = document.createElement("div");
 
    34            var oS = objScreen.style;
 
    35            objScreen.id = "mask";
 
    36            oS.display = "block";
 
    37            oS.top = oS.left = oS.margin = oS.padding = "0px";
 
    38            oS.width = "100%";
 
    39            oS.height = document.documentElement.clientHeight+"px";
 
    40            oS.position = "absolute";
 
    41            oS.zIndex = "3";
 
    42            oS.background = "#6C6C6C";
 
    43            oS.filter = "alpha(opacity=80);-moz-opacity:0.8;opacity:0.8";
 
    44            oS.opacity = 40/100;
 
    45            oS.MozOpacity = 40/100;
 
    46            document.body.appendChild(objScreen);
 
    47             
 
    48            document.getElementById(this.div).style.display="block";
 
    49           
 
    50             
 
    51        }
 
    52         
 
    53        this.close=function()
 
    54        {
 
    55            document.getElementById(this.div).style.display="none";
 
    56                //移除遮罩层
 
    57            var ScreenOver = document.getElementById("mask");
 
    58            if(ScreenOver!=null)
 
    59            {
 
    60                document.body.removeChild(ScreenOver);
 
    61            }
 
    62        }
 
    63    }
 
2. [代码][HTML]代码      
        01 <body>
 
        02  
 
        03 <a href="javascript:open()">Open</a>
 
        04  
 
        05 <div id="test" class="dialog">
 
        06  
 
        07 HELLO OSCHINA !
 
        08  
 
        09 </div>
 
        10  
 
        11 <script type="text/javascript">
 
        12  
 
        13 //div,宽,高,左,右,标题
 
        14 var d = new zDialog('test',300,250,200,200,'测试对话框');
 
        15  
 
        16 function open()
 
        17 {
 
        18     d.open();
 
        19 }
 
        20 function close()
 
        21 {
 
        22     d.close();
 
        23 }
 
        24  
 
        25 </script>
 
        26  
 
        27 </body>
 
3. [代码][CSS]代码      
        01 .dialog
 
        02        {
 
        03            position: absolute;
 
        04            left: 500px;
 
        05            top: 200px;
 
        06            display: none;
 
        07            width: 400px;
 
        08            height: 200px;
 
        09            z-index: 9999;
 
        10            background-color: #DBDBDB;
 
        11            -webkit-box-shadow: 5px 5px 10px #363636;
 
        12            -moz-box-shadow: 5px 5px 10px #363636;
 
        13            box-shadow: 5px 5px 10px #363636;
 
        14        }
 
4. [图片] TM截图未命名.png