使用JS实现弹出层

最新推荐文章于 2023-09-15 14:36:47 发布

心远

最新推荐文章于 2023-09-15 14:36:47 发布

阅读量3.3k

点赞数

分类专栏： JQuery 文章标签： function button xhtml input div html

本文链接：https://blog.csdn.net/yanmingming1989/article/details/6658908

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

心远

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JS实现弹出层

简单的测试页面 <!-- #dt_3 { cursor: pointer; }div#mbDIV { position: absolute; top: 0px; left: 0px; width: 100%; he
复制链接

扫一扫

专栏目录