简单的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=setting.cssif(i==='opacity'){loading.style.filter="alpha(opacity="+setting.css*100+")"}}if(setting.cssclass) loading.className=setting.cssclass;for(i in setting.overlayCss){newMask.style=setting.overlayCssif(i==='opacity'){newMask.style.filter="alpha(opacity="+setting.overlayCSS*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 = function(){ var tests = document.getElementsByTagName('button') tests.onclick = function(){ var c = blockui({ massage: "hello world,点击解锁", css: { background: '#ccc', opacity: 0.8 }, overlayCSS: { opacity: 0.1 }, contentHanler: function(o){ o.onclick = function(){ c() } }, overlayHanler: function(o){ o.onclick = function(){ alert('hello') } } }) } tests.onclick = function(){ var block = blockui({width:200,height:100,cssclass:'test1', css: { border: 'none', padding: '15px', backgroundColor: '#000', opacity: 0.5, color: '#fff' } })setTimeout(function(){block()},3000) } tests.onclick=function(){var block = blockui({overlayCss:{background: 'red'},css:{background: 'red'} })setTimeout(function(){block()},3000)} } //--> </script> </head> <body> <button> 测试1 </button> <br/> <button> 测试2 </button> <br/> <button> 测试3 </button> <br/> </body></html>
页:
[1]