简略的javascript弹出层-JavaSript-爱易网页

简略的javascript弹出层

日期：2014-05-16　浏览次数：20407 次

简单的javascript弹出层

function blockui(setting){
				setting=setting||{}
                var width = setting.width || 500
                var height = setting.height || 300
                var massage = setting.massage || "loading"
                var newMask = document.createElement("div")
                var loading = document.createElement("div")
                loading.style.position = 'absolute'
                loading.style.zIndex = 10
                loading.style.border = "1px #666666 solid"
                loading.style.background = '#fff'
                loading.style.width = width + "px"
                loading.style.height = height + "px"
                newMask.style.position = "absolute";
                newMask.style.zIndex = "1";
                var _scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth)
                var _scrollHeight = document.documentElement.clientHeight+Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
                newMask.style.width = _scrollWidth + "px";
                newMask.style.height = _scrollHeight + "px";
                newMask.style.top = "0px";
                newMask.style.left = "0px";
                newMask.style.background = "#33393C";
                newMask.style.filter = "alpha(opacity=40)";
                newMask.style.opacity = "0.4";
				newMask.style.cursor='wait'
				for(i in setting.css){
					loading.style[i]=setting.css[i]
					if(i==='opacity'){
						loading.style.filter="alpha(opacity="+setting.css[i]*100+")"
					}
				}
				if(setting.cssclass)
				   loading.className=setting.cssclass;
				for(i in setting.overlayCss){
					newMask.style[i]=setting.overlayCss[i]
					if(i==='opacity'){
						newMask.style.filter="alpha(opacity="+setting.overlayCSS[i]*100+")"
					}
					
				}
				if(setting.overlayCssClass)
				    newMask.className=setting.overlayCssClass;
				
				if(setting.contentHanler){
					setting.contentHanler(loading)
				}
				if(setting.overlayHanler){
					setting.overlayHanler(newMask)
				}
				
                document.body.appendChild(newMask);
                document.body.appendChild(loading)
                var interval;
                loading.innerHTML = "";
                loading.style.top = (document.documentElement.clientHeight - height - 10) / 2 + "px";
                loading.style.left = (document.documentElement.clientWidth - width - 10) / 2 + "px";
                if (typeof(massage) === 'string') {
                    loading.innerHTML = massage;
                }
                else {
                    loading.appendChild(massage)
                }
                setInterval(function(){
                    var top_ = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop
                    loading.style.top = (document.documentElement.clientHeight - height) / 2 + top_ + "px"
                }, 20)
                
                return function(){
                    document.body.removeChild(loading)
                    document.body.removeChild(newMask)
                    clearInterval(interval)
                }
            }

测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>弹出层</title>
		<style type="text/css">
			.test1{
				 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
			}
		</style>
        <script type="text/javascript" language="JavaScript" src="blockui.js">
        </script>
        <script language="JavaScript">
            <!--
            window.onload = fun

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

简略的javascript弹出层

相关资料更多>

推荐阅读更多>