您的位置：首页 > Web前端 > JavaScript

使用JS实现弹出层

2011-08-04 10:01 246 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" />
<title>简单的测试页面</title>
<style type="text/css">
<!--
#dt_3 {
cursor: pointer;
}

div#mbDIV {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
z-index: 10;
filter: alpha(opacity=50);
opacity: 0.5;    /**设置50%透明 **/
}
div#loginDIV {
position: absolute;
width: 300px;
height: 150px;
background-color: #FFFF00;
z-index: 20;
}
div#loginTopDIV {
width: 100%;
height: 20px;
background-color: #FF0000;
cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
function show(ele)
{
eval(ele + ".style.display = ''");
}
function hidden(ele)
{
eval(ele + ".style.display = 'none'");
}
//-->
</script>
</head>

<body>

<div style="overflow: hidden;">
<h3>请点击 --> 03号拖拉机</h3>
<p id="dt_1">01号拖拉机</p>
<p id="dt_2">02号拖拉机</p>
<p id="dt_3">03号拖拉机</p>
<p id="dt_4">04号拖拉机</p>
</div>
<div id="mbDIV" style="display: none;">/**设置弹出层的底部颜色，让底部文字不可见**/
</div>
/**以下是弹出框**/
<div id="loginDIV" style="top: 200px; left: 300px; display: none;">
<div id="loginTopDIV">
Move</div>
<p style="text-align: center;">登陆内容在这里哦</p>
<form action="#" method="get" style="text-align: center;">
<input id="button_1" type="button" value="确定" />
<input id="button_2" type="button" value="取消" />
</form>
</div>
<script type="text/javascript">
<!--
/**
* 显示和隐藏信息
* */

document.getElementById("button_1").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
document.getElementById("button_2").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
dt_3.onclick = function()
{
loginDIV.style.top = "200px";
loginDIV.style.left = "300px";
show("loginDIV");
show("mbDIV")
}

/**
*这里写的是拖动信息
* */
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY  - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth  = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup   = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
//判断 top 和 left 是否超出边界
top = top < 0 ? 0 : top;
top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
left = left < 0 ? 0 : left;
left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
loginDIV.style.top  = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  function button xhtml input div html
相关文章推荐
新的分享
章节导航