javascript弹出拖动窗口

可以拖动的弹出窗口，在很多网页上都可以见到，非常的人性化，下面通过一段javascript代码就可以实现弹出拖动窗口，废话不多说了，直接贴代码了。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>可以拖动的弹出窗口</title>
<style type="text/css">
#popDiv
{
 position:absolute;
 visibility:hidden;
 overflow:hidden;
 border:2px solid #AEBBCA;
 background-color:#EEF1F8;
 cursor:move;
 padding:1px;
}
#popTitle
{
 background:#9DACBF;
 height:20px;
 line-height:20px;
 padding:1px;
}
#popForm
{
 padding:2px;
}
.title_left
{
 font-weight:bold;
 padding-left:5px;
 float:left;
}
.title_right
{
 float:right;
}
#popTitle .title_right a
{
 color:#000;
 text-decoration:none;
}
#popTitle .title_right a:hover
{
 text-decoration:underline;
 color:#FF0000;
}
</style>
<script>
function showPopup() //弹出层
{
 var objDiv=document.getElementById("popDiv");
 objDiv.style.top="50px";//设置弹出层距离上边界的距离
 objDiv.style.left="200px";//设置弹出层距离左边界的距离
 objDiv.style.width="300px";//设置弹出层的宽度
 objDiv.style.height="200px";//设置弹出层的高度
 objDiv.style.visibility="visible";
}
function hidePopup()//关闭层
{
 var objDiv=document.getElementById("popDiv");
 objDiv.style.visibility="hidden";
}
</script>
</head>
<body>
<div id="popDiv">
 <div id="popTitle"> <!-- 标题div -->
 <span class="title_left">修改操作</span>
 <span class="title_right" onClick="hidePopup()"><a href="#">关闭</a></span>
 </div>
 <div id="popForm"></div>
</div>
<input name="" type="button" onClick="showPopup()" value="操作" />
<script type="text/javascript">
var objDiv=document.getElementById("popDiv");
var isIE=document.all?true:false;//判断浏览器类型
document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数
{
 var evnt=evnt?evnt:event;
 if(evnt.button == (document.all ? 1 : 0))
 {
 mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下
 }
}
objDiv.onmousedown = function(evnt)
{
 objDrag=this;//objDrag为拖动的对象
 var evnt=evnt?evnt:event;
 if(evnt.button == (document.all?1 : 0))
 {
 mx=evnt.clientX;
 my=evnt.clientY;
 objDiv.style.left=objDiv.offsetLeft+"px";
 objDiv.style.top=objDiv.offsetTop+"px";
 if(isIE)
 {
  objDiv.setCapture();
 }
 else
 {
  window.captureEvents(Event.MOUSEMOVE);
 }
 }
}
document.onmouseup=function()
{
 mouseD=false;
 objDrag="";
 if(isIE)
 {
 objDiv.releaseCapture();
 }
 else
 {
 window.releaseEvents(objDiv.MOUSEMOVE);
 }
}
document.onmousemove=function(evnt)
{
 var evnt=evnt?evnt:event;
 if(mouseD==true&&objDrag)
 {
 var mrx=evnt.clientX-mx;
 var mry=evnt.clientY-my;
 objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";
 objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";
 mx = evnt.clientX;
 my = evnt.clientY;
 }
}
</script>
</body>
</html>

以上是本文实现javascript弹出拖动窗口的全部内容，希望对大家有所帮助。

赞 (0)

相关推荐

  • js仿百度登录页实现拖动窗口效果

    在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动:那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了:首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下.移动.松开:在这三个事件里分别计算元素鼠标的位置即可: 复制代码 /******* 拖拽原理1: 拖拽状态 = 0 鼠标在元素上按下的时候 { 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候 { 如果拖拽状态是0就什么也不做.

  • javascript实现漂亮的拖动层，窗口拖拽特效

    javascript实现漂亮的拖动层,窗口拖拽特效 <!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

  • javascript div 弹出可拖动窗口

    /* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon

  • javascript实现可拖动变色并关闭层窗口实例

    本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 <html> <head> <title>拖动窗口</title> <meta http-equiv="Content-Type" con

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • JavaScript模拟可展开、拖动与关闭的聊天窗口实例

    用JavaScript实现的仿QQ聊天窗口,可以展开层.拖动层.关闭层,还可以简单发消息,很不错吧,而且代码也不多,适合新手研究,也比较实用,你可以在此基础上扩展很多JS+CSS应用. <!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <html> <he

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

  • 基于JavaScript实现窗口拖动效果

    基于JavaScript实现窗口拖动效果

    写法类似于上一篇,水平进度条拖拽,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .nav{ width: 100%; height: 20px; background-co

  • Jquery仿IGoogle实现可拖动窗口示例代码

    google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo. 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets.这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets. 废话就不多说了,直接把源代码贴出来,让大家学习! html <html> <head

随机推荐