JS弹出并拖动层效果

最新推荐文章于 2023-10-10 16:42:49 发布

u010479588

最新推荐文章于 2023-10-10 16:42:49 发布

阅读量358

点赞数

本文链接：https://blog.csdn.net/u010479588/article/details/13290071

版权

本效果需要包含jquery文件方能实现

<!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>
<title>点击按钮弹出层效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,h2{margin:0;padding:0;}
#faqbg{background-color:#666666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:1000px;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;}

#faqdiv{position:absolute;width:400px;height:500px;background-color:#fff;border:1px #8FA4F5 solid;padding:1px;z-index:100; display:none;}
#faqdiv h2{height:25px;font-size:14px;background-color:#8FA4F5;position:relative;padding-left:10px;line-height:25px; cursor:move;}
#faqdiv h2 a{position:absolute;right:5px;font-size:12px;color:#FF0000;}
#faqdiv .form{padding:10px;}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>

</head>
<body>

<div id="faqbg"></div>
<div id="faqdiv">
   <h2 id="title">层的标题<a href="#" class="close">关闭</a></h2>
   <div class="form">这里是提示信息！</div>
</div>

<p align="center">
<input value="弹出" class="but" type="button">
<input type="button" value="关闭" class="close">
</p>
<script type="text/javascript">
$(function(){
   $(".but").click(function(){
       $("#faqbg").css({display:"block",height:$(document).height()});
       var yscroll =document.documentElement.scrollTop;
       $("#faqdiv").css("top","100px");
       $("#faqdiv").css("display","block");
       document.documentElement.scrollTop=0;
   });
   $(".close").click(function(){
       $("#faqbg").css("display","none");
       $("#faqdiv").css("display","none");
   });
})
var posX;
var posY;
fdiv = document.getElementById("faqdiv");
document.getElementById("title").οnmοusedοwn=function(e)
{
    if(!e) e = window.event; //IE
    posX = e.clientX - parseInt(fdiv.style.left);
    posY = e.clientY - parseInt(fdiv.style.top);
    document.onmousemove = mousemove;
}
document.onmouseup = function()
{
    document.onmousemove = null;
}
function mousemove(ev)
{
    if(ev==null) ev = window.event;//IE
    fdiv.style.left = (ev.clientX - posX) + "px";
    fdiv.style.top = (ev.clientY - posY) + "px";
}

function autoSize(){
   document.getElementById("faqdiv").style.top = (document.documentElement["clientHeight"]/2-250) +'px';
   document.getElementById("faqdiv").style.left = (document.documentElement["clientWidth"]/2-200) +'px';
}
autoSize();
window.onresize = autoSize();
</script>

</body>
</html>