“模态”DIV对话框-白红宇

“模态”DIV对话框

阅读量：6480 次

发布时间：2019-06-23

本文共 2964 字，大约阅读时间需要 9 分钟。

51CTO把我以前粘贴的代码弄掉了一些，让我自己拿回来用时居然不能用，现在重新粘贴上去。（2013-06-27）

下面的代码，可复制粘贴直接运行测试。

1、js代码：

/*本脚本文件须结合jquery使用*/                                                                                               function showModalDiv() {    var sWidth, sHeight;    sWidth = $(window).width();    sHeight = $(document).height();                                                                                                                                                                                                  //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）    var bgObj = document.createElement("div"); //创建一个div对象（背景层）                                                                                                   //定义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); //在body内添加该div对象                                                                                                   document.getElementById("divModal").style.display = "block"; //显示"模态"DIV                                                                                                   $("#closeLogin").mouseover(function() {        this.style.fontWeight = "bold";    });    $("#closeLogin").mouseleave(function() {        this.style.fontWeight = "normal";    });    document.getElementById("closeLogin").onclick = function removeObj() {        document.getElementById("divModal").style.display = "none"; //隐藏"模态"DIV        document.body.removeChild(bgObj); //删除背景层Div    }}var i = 100;                                                                                               function scall() {    var divModal = document.getElementById("divModal");    var w_width = $(window).width();    var w_heitht = $(window).height();    var div_width = divModal.style.width;    var div_height = divModal.style.height;    var i_width = parseInt(div_width.substr(0, div_width.length - 2));      //div的宽度    var i_height = parseInt(div_height.substr(0, div_height.length - 2));   //div的高度    divModal.style.left = (w_width / 2 - i_width / 2) + "px";    divModal.style.top = (w_heitht / 2 - i_height * 0.6) + "px";}window.onscroll = scall;    //屏幕滚动事件window.onresize = scall;    //屏幕大小改变事件window.onload = scall;      //加载屏幕

2、测试页面，先引入jquery，再引入上面的脚本。

                    
             
                      
                           关闭                    
      
        
      
       HelloWorld!
          
     
    
    
     
      到底啦！