求弹出div并且可以关闭的带样式的源码，javascript不要jq？？？急！急！急！急！急！

hongcha99 2012-05-15 11:19:07

如题

...全文

46 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2012-05-15

打赏
举报

<!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>

<style type="text/css">

/* LoginUI*/

.hidden { display: none;}

.popup{position: absolute;width: 450px;	z-index: 60000;}

.container{	border: 5px solid #333;width: 445px;background: white;height:400px;}

</style>

<script type="text/javascript">

var LoginUI = !!window.LoginUI || {};

$ = function(id){return document.getElementById(id)}

LoginUI.getViewportWidth = function(){

	var width=0;

	if(document.documentElement && document.documentElement.clientWidth){

	width=document.documentElement.clientWidth;}

	else if(document.body && document.body.clientWidth){

	width=document.body.clientWidth;}

	else if(window.innerWidth){

	width=window.innerWidth-18;}

	return width;

}





LoginUI.getViewportHeight = function() {

	var height=0;

	if(window.innerHeight){

	height=window.innerHeight-18;}

	else if(document.documentElement&&document.documentElement.clientHeight){

	height=document.documentElement.clientHeight;}

	else if(document.body&&document.body.clientHeight){

	height=document.body.clientHeight;}

	return height;

}





LoginUI.getViewportScrollY=function() {

	var scrollY=0;

	if(document.documentElement&&document.documentElement.scrollTop){

	scrollY=document.documentElement.scrollTop;}

	else if(document.body&&document.body.scrollTop){

	scrollY=document.body.scrollTop;}

	else if(window.pageYOffset){

	scrollY=window.pageYOffset;}

	else if(window.scrollY){

	scrollY=window.scrollY;}

	return scrollY;

}





LoginUI.centerDiv = function(div)

{

	var top=((LoginUI.getViewportHeight()-div.offsetHeight)/2);

	if(top<0)top=10;

	div.style.left=((LoginUI.getViewportWidth()-div.offsetWidth)/2)+"px";

	div.style.top=top+LoginUI.getViewportScrollY()+"px";

}



LoginUI.showLogin = function()

{		

	$("Login").className = "popup container";

	$("Login").style.display="block";

	LoginUI.centerDiv($("Login"));

	$("blockUI").style.display="block";

	$("blockUI").style.height = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() + "px";

}



LoginUI.hideLogin = function()

{

	$("blockUI").style.display="none";

	$("Login").style.display="none";

}

</script>

</head>

<body>

<div id="blockUI" style="display: none; background-color: black; width: 100%; height: 1000px; position: absolute; left: 0px; top: 0px; z-index: 50000; -moz-opacity: 0.5; opacity: 0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';filter:alpha(opacity=50);" onclick="return false" onmousedown="return false" onmousemove="return false" onmouseup="return false" ondblclick="return false">

 

</div>

<div id="Login" class="popup container hidden">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<br/><br/><br/>

<input type=button onclick='LoginUI.hideLogin()' value="Close" />

</div>

<input type="button" onclick="LoginUI.showLogin()" value="Login In" />

</body>

</html>