<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
}
#panel{
width:100%;
height:2000px;
background-color:
#000;
opacity: 0.4;
filter: alpha(opacity: 40);
position: absolute;
top:0;
left:0;
display: none;
}
#box{
width:300px;
height:300px;
background-color:
#fff;
position: absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
display: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button id=
"btn"
>登录</button>
<div id=
"panel"
></div>
<div id=
"box"
></div>
<script src=
"js/myFunc.js"
></script>
<script>
window.onload =
function
(){
btn.onclick =
function
(event){
if
(event && event.stopPropagation){
event.stopPropagation();
}
else
{
event.cancelBubble = ture;
}
$(
"box"
).style.display =
"block"
;
$(
"panel"
).style.display =
"block"
;
document.body.style.overflow =
"hidden"
;
}
document.onclick =
function
(event){
var
e = event || window.event;
var
tranId = e.target ? e.target.id : e.srcElement.id;
if
(tranId !==
"box"
){
$(
"box"
).style.display =
"none"
;
$(
"panel"
).style.display =
"none"
;
document.body.style.overflow =
"auto"
;
}
else
{
window.location.href =
"http://www.baidu.com"
;
}
}
}
</script>