<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>弹出框</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.btn{display: block;width:50px;height: 30px;margin-left: 345px;margin-top: 30px;}
.main{width: 600px;height: 800px;padding: 30px;margin:30px auto 0;border:1px solid gray;}
.alertme{width:300px;height: 180px;padding: 10px;border:1px solid red;display: none;background:#fff;}
</style>
<body>
<input type="button" value="alert" class="btn" id="btn" />
<div class="main">
<p>百度百科是百度为网友提供的信息存储空间，是一部内容开放、自由的网络百科全书。 百度百科本着平等、协作、分享、自由的互联网精神，提倡网络面前人人平等，所有人共同协作编写百科全书， 让知识在一定的技术规则和文化脉络下得以不断组合和拓展。为用户提供一个创造性的网络平台， 强调用户的参与和奉献精神，充分调动互联网所有用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享， 同时实现与搜索引擎的完美结合，从不同的层次上满足用户对信息的需求。</p>
</div>
<div id="alertme" class="alertme">
<a href="#" id="cls" class="cls">关闭</a>
<p>Our name was inspired by a poem written
more than 800 years ago during the Song Dynasty.
The poem compares the search for a retreating beauty amid chaotic glamour with
the search for one's dream while confronted by life's many obstacles.</p>
</div>
<script type="text/javascript">
var stroid=''
//创建一个大的背景
function bigbg(preid){
var bbg=document.createElement('div');
bbg.setAttribute('id','bibg');
document.body.appendChild(bbg);
setbigbg();
stroid=preid;
alertdiv();
}
//设置背景样式
function setbigbg(){
var dwbg=document.getElementById('bibg');
var clW=cliW();
var clH=cliH();
var srT=scrT();
var srL=scrL();
dwbg.style.position ='absolute';
dwbg.style.zIndex ='10000';
dwbg.style.width =clW+'px';
dwbg.style.height =clH+'px';
dwbg.style.top =srT+'px';
dwbg.style.left =srL+'px';
dwbg.style.background="green";
dwbg.style.opacity ='0.6';
}
//需要显示的div
function alertdiv(){
var al=document.getElementById(stroid);
al.style.display='block';
var clW=cliW();
var clH=cliH();
var srT=scrT();
var srL=scrL();
var slfW=al.scrollWidth;
var slfH=al.scrollHeight;
var T=srT+Math.round((clH-slfH)/2);
var W=srL+Math.round((clW-slfW)/2);
al.style.display='block';
al.style.position='absolute';
al.style.zIndex='10001';
al.style.top=T+'px';
al.style.left=W+'px';
}
//close弹出框
function closea(){
var div=document.getElementById(stroid);
div.style.display='none';
var bbg=document.getElementById('bibg');
document.body.removeChild(bbg);
stroid='';
}
// 需要的值
function scrT(){
var n=document.documentElement.scrollTop||document.body.scrollTop||0;
return n;
}
function scrL(){
var n=document.documentElement.scrollLeft||document.body.scrollLeft||0;
return n;
}
function cliW(){
var n=document.documentElement.clientWidth||document.body.clientWidth||0;
return n;
}
function cliH(){
var n=document.documentElement.clientHeight||document.body.clientHeight||0;
return n;
}
var btn=document.getElementById('btn');
btn.onclick=function(){
bigbg('alertme');
}
var cls=document.getElementById('cls');
cls.onclick=function(){
closea();
}
window.onresize=function(){
if(stroid.length>0){
setbigbg();
alertdiv();
}
}
window.onscroll=function(){
if(stroid.length>0){
setbigbg();
alertdiv();
}
}
</script>
</body>
</html>
