工作上经常需要弹出一个层来实现各种表单操作或者提示，于是一直想写一个简单的封装JS来做这个，便于以后使用，现把简单的使用方法说一下，有什么地方不好的欢迎留言。
特点:支持多个弹出层，可拖拽，可关闭，自动捕获鼠标坐标并定位，层里的内容可以自由编辑。
使用要点：
1.function popup_show(id)
{
element = document.getElementById(’popup’+id);
drag_element = document.getElementById(’popup_drag’+id);
exit_element = document.getElementById(’popup_exit’+id);
element.style.position = “absolute”;
element.style.visibility = “visible”;
element.style.display = “block”;
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+’px’;
element.style.top = (document.documentElement.scrollTop +popup_mouseposY-10)+’px’;
drag_element[’target’] = ‘popup’+id;
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
在要弹出层的地方触发这个函数,popup_show(id);如在一个页面要触发多个层,就写popup_show(1),popup_show(2)等。然后每个弹出层里有如下层即可：
<div id=”popup+ID” style=”visibility: hidden; display: none;”>
<div id=”popup_drag+ID”>
层标题
<div id=”popup_exit+ID”>关闭层</div>
</div>
内容
</div>
2.层弹出时的位置是
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+’px’;
element.style.top = (document.documentElement.scrollTop +popup_mouseposY-10)+’px’;
这里控制。
本来想把这些代码自动生成的，不过这样的话，每个层的演示就不方便定义了。暂时就这样把。呵呵
代码如下：演示
<!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" />
<meta name="description" content="弹出层" />
<meta name="keywords" content="对弹出层的小型封装,可以在一个页面弹出多个层." />
<script language="javascript">
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
function popup_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ----- popup_mousedown -------------------------------------------------------
function popup_mousedown(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
if ( ie && window.event.button != 1) return;
if (!ie && e.button != 0) return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else document.onmousedown = new Function("return false;");
}
// ----- popup_mousemove -------------------------------------------------------
function popup_mousemove(e)
{
if (!popup_dragging) return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ----- popup_mouseup ---------------------------------------------------------
function popup_mouseup(e)
{
if (!popup_dragging) return;
popup_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (ie)
document.onselectstart = popup_oldfunction;
else document.onmousedown = popup_oldfunction;
}
// ----- popup_exit ------------------------------------------------------------
function popup_exit(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
// ----- popup_show ------------------------------------------------------------
function popup_show(id)
{
element = document.getElementById('popup'+id);
drag_element = document.getElementById('popup_drag'+id);
exit_element = document.getElementById('popup_exit'+id);
element.style.position = "absolute";
element.style.visibility = "visible";
element.style.display = "block";
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+'px';
element.style.top = (document.documentElement.scrollTop +popup_mouseposY-10)+'px';
drag_element['target'] = 'popup'+id;
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
// ----- popup_mousepos --------------------------------------------------------
function popup_mousepos(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ----- Attach Events ---------------------------------------------------------
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousedown', popup_mousepos);
else document.addEventListener('mousedown', popup_mousepos, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);
</script>
<title>狐狸的BLOG----弹出层的一个小型封装</title>
<style>
div.sample_popup { z-index: +1; }
div.menu_form_header{
cursor:move
}
div.sample_popup div.menu_form_header
{
border-bottom: 0px;
cursor: default;
cursor:move;
width: 190px;
height: 20px;
line-height:24px;
vertical-align: middle;
background:#34A2DC;
color:#FFF;
text-decoration: none;
font-weight: 900;
font-size: 13px;
padding-left:10px;
overflow:hidden;
}
div.sample_popup div.menu_form_body
{
border: 3px solid #34A2DC;
width: 194px;
background:#FFF;
font-size:12px;
}
div.sample_popup img.menu_form_exit
{
float: right;
margin: 5px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup form
{
margin: 0px;
padding: 8px 10px 10px 10px;
}
.menu_form_body a {
text-decoration: none;
}
</style>
</head>
<body>
<input type="button" onclick="popup_show(1)" value='登录'/>
<div class="sample_popup" id="popup1" style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag1">
<img class="menu_form_exit" id="popup_exit1" src="close_yd.gif" />
窗口一
</div>
<div class="menu_form_body">
<form method="post" action="">
<div><input type="checkbox" class="input_yd" />同城周边 </div>
<div><input type="checkbox" />同城周边 </div>
<div><input type="checkbox" />同城周边 </div>
这里的内容可以自由编辑
<input type="submit" value="确定" />
</form>
</div>
</div>
</div>
<input type="button" onclick="popup_show(2)" value='登录'/>
<div class="sample_popup" id="popup2" style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag2">
<img class="menu_form_exit" id="popup_exit2" src="close_yd.gif" />
窗口二
</div>
<div class="menu_form_body">
<form method="post" action="">
<div><input type="checkbox" class="input_yd" />同城周边 </div>
<div><input type="checkbox" />同城周边 </div>
<div><input type="checkbox" />同城周边 </div>
这里的内容可以自由编辑
<input type="submit" value="确定" />
</form>
</div>
</div>
</div>
<a href="http://www.foxbaty.cn/blog/">狐狸的BLOG</a>
</body>
</html>