点击一个事件，弹出一个全屏的DIV(全屏的意义就是把浏览器全部遮住)

点击一个事件，弹出一个全屏的DIV(全屏的意思就是把浏览器全部遮住)
求救：
点击一个事件，弹出一个全屏的DIV(全屏的意思就是把浏览器全部遮住（类似于一个winform的全屏）)???
这个要怎么样来处理？？？

------解决方案--------------------
ColorBox应该可以。

http://www.jacklmoore.com/colorbox

width和Height的值用浏览器客户窗口大小即可。
------解决方案--------------------

HTML code


<head>
    <title></title>

    <script type="text/javascript">

        function sAlert(str) {
            var msgw, msgh, bordercolor;
            msgw = 300;//提示窗口的宽度
            msgh = 200;//提示窗口的高度
            titleheight = 25; //提示窗口标题高度
            bordercolor = "#FF3C00";//提示窗口的边框颜色
            titlecolor = "#D2CECE";//提示窗口的标题颜色

            var sWidth, sHeight;
            //sWidth=document.body.offsetWidth;//得出当前屏幕的宽
            sWidth = document.body.clientWidth;//BODY对象宽度

            //sHeight=screen.height; //得到当前屏幕的高
            //sHeight=document.body.clientHeight;//BODY对象高度
            if (window.innerHeight && window.scrollMaxY) {
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight) {
                sHeight = document.body.scrollHeight;
            }
            else {
                sHeight = document.body.offsetHeight;
            } //以上得到整个屏幕的高
            //这个主要是不能取到合适的高
            //sHeight = document.body.offsetWidth;
            var bgObj = document.createElement("div");//创建一个div对象
            bgObj.setAttribute('id', 'bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
            bgObj.style.position = "absolute";//把bgObj这个div绝对定位
            bgObj.style.top = "0";//顶部为0
            bgObj.style.background = "#777";//背景颜色
            bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//IE浏览器透明度设置
            bgObj.style.opacity = "0.6";//透明度（火狐浏览器中）
            bgObj.style.left = "0";//左边为0
            bgObj.style.width = sWidth+"PX";//宽（上面得到的屏幕宽度）
            bgObj.style.height = sHeight+"PX";//高（上面得到的屏幕高度）
            bgObj.style.zIndex = "100"; //层的Z轴位置
            document.body.appendChild(bgObj);

            var msgObj = document.createElement("div");//创建一个div对象
            msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            msgObj.setAttribute("align", "center");//为div的align赋值
            msgObj.style.background = "white"; //背景颜色为白色
            msgObj.style.border = "1px solid #FF3C00 ";//边框属性，颜色在上面已经赋值
            msgObj.style.position = "absolute";//绝对定位
            msgObj.style.left = "35%";//从左侧开始位置
            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 = msgw + "px";//提示框的高（上面定义过）
            msgObj.style.textAlign = "center";//文本位置属性，居中
            msgObj.style.lineHeight = "25PX";//行间距
            msgObj.style.zIndex = "101";//层的Z轴位置

            var title = document.createElement("h4");//创建一个h4对象
            title.setAttribute("id", "msgTitle");//为h4对象添加标题
            title.setAttribute("align", "right");//文字对齐方式
            title.style.margin = "0";//浮动
            title.style.padding = "3PX";//浮动
            title.style.background = titlecolor;//背景颜色
            title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20,startY=20,finishX=100,finishY=100,style=1,opacity=0.75,finishOpacity=100);";//设置IE浏览器的透明度
            title.style.opacity = "0.75";//透明度（FF）
            //title.style.border = "1px,solid" +bordercolor;//边框
            title.style.height = "25px";//高度
            title.style.font = "12px Verdana,Geneva,Arial,Helvetica,sans-serif";//字体属性
            title.style.color = "white";//文字颜色
            title.style.cursor = "pointer";//鼠标样式
            title.innerHTML = "<a href=\"#\">关闭</a>";//显示文字
            title.onclick = function () {
                document.body.removeChild(bgObj);//移除遮罩层
                document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题
                document.body.removeChild(msgObj);//移除提示框
            }
            document.body.appendChild(msgObj);//在body中画出提示框层
            document.getElementById("msgDiv").appendChild(title);//在提示框中移除标题
            var txt = document.createElement("p");
            txt.style.margin = "1em 0";//文本浮动
            txt.setAttribute("id", "msgTxt");//为P属性增加id属性
            txt.innerHTML = str;//把传进来的值赋给p属性
            document.getElementById("msgDiv").appendChild(txt); //把P属性增加到提示框里
        }
    
    </script>



</head>
<body>
  <a href="#" onclick="sAlert('<a href=http://localhost:49757/aasswwe/HTMLPage13.htm)>测试效果</a>');">点击测试</a>

</body>

点击一个事件，弹出一个全屏的DIV(全屏的意义就是把浏览器全部遮住)

相关推荐