JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
更新时间:2015年08月06日 11:53:40 作者:皮蛋
这篇文章主要介绍了JS实现弹出浮动窗口,可支持鼠标拖动和关闭的功能,界面美观大方,涉及javascript动态创建对话框的相关技巧,需要的朋友可以参考下
本文实例讲述了JS实现弹出浮动窗口。分享给大家供大家参考。具体如下:
这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧。
关于一些参数说明:
bodycontent:要在窗口中显示的内容
title:窗口的标题
removeable:窗口是否能拖动
注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度。
注:在火狐或chrome下效果最佳,IE8下可能有些小问题。
点击此处查看运行效果:
http://demo.jb51.net/js/2015/js-float-window-mousemove-codes/
运行效果图如下:
具体代码:
<html> <head> <title>Js弹出浮动窗口,支持鼠标拖动和关闭</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /** 关于一些参数说明: *bodycontent:要在窗口显示的内容,dom对象 *title:窗口标题,字符串类型 *removeable:窗口能否拖动,布尔类型 *注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/ function createdialog(width,height,bodycontent,title,removeable){ if(document.getElementById("www_jb51_net")==null){ /*创建窗口的组成元素*/ var dialog = document.createElement("div"); var dialogtitlebar= document.createElement("div"); var dialogbody = document.createElement("div"); var dialogtitleimg = document.createElement("span"); var dialogtitle = document.createElement("span"); var dialogclose = document.createElement("span"); var closeaction = document.createElement("button"); /*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/ dialog.id = "223238909"; /*组装对话框标题栏,按从里到外的顺序组装*/ dialogtitle.innerHTML = title; dialogtitlebar.appendChild(dialogtitleimg); dialogtitlebar.appendChild(dialogtitle); dialogtitlebar.appendChild(dialogclose); dialogclose.appendChild(closeaction); /*组装对话框主体内容*/ if(bodycontent!=null){ bodycontent.style.display = "block"; dialogbody.appendChild(bodycontent); } /*组装成完整的对话框*/ dialog.appendChild(dialogtitlebar); dialog.appendChild(dialogbody); /*设置窗口组成元素的样式*/ var templeft,temptop,tempheight//窗口的位置(将窗口放在页面中间的辅助变量) var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串 templeft = (document.body.clientWidth-width)/2; temptop = (document.body.clientHeight-height)/2; tempheight= height-30; dialogcssText= "position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;"; dialogbodycssText = "width:100%;background:#ffffff;"+"height:" + tempheight + "px;"; dialog.style.cssText = dialogcssText; dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;"; dialogbody.style.cssText = dialogbodycssText; dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;"; dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;"; dialogclose.style.cssText = "float:right;display:block;margin:4px;line-height:20px;"; closeaction.style.cssText = "height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;"; /*为窗口元素注册事件*/ var dialogleft = parseInt(dialog.style.left); var dialogtop = parseInt(dialog.style.top); var ismousedown = false;//标志鼠标是否按下 /*关闭按钮的事件*/ closeaction.onclick = function(){ dialog.parentNode.removeChild(dialog); } /*实现窗口的移动,这段代码很典型,网上很多类似的代码*/ if(removeable == true){ var ismousedown = false; var dialogleft,dialogtop; var downX,downY; dialogleft = parseInt(dialog.style.left); dialogtop = parseInt(dialog.style.top); dialogtitlebar.onmousedown = function(e){ ismousedown = true; downX = e.clientX; downY = e.clientY; } document.onmousemove = function(e){ if(ismousedown){ dialog.style.top = e.clientY - downY + dialogtop + "px"; dialog.style.left = e.clientX - downX + dialogleft + "px"; } } /*松开鼠标时要重新计算当前窗口的位置*/ document.onmouseup = function(){ dialogleft = parseInt(dialog.style.left); dialogtop = parseInt(dialog.style.top); ismousedown = false; } } return dialog; }//end if(if的结束) } </script> <style> table{background:#b2d235;} button{font-size:12px;height:23;background:#ece9d8;border-width:1;} #linkurl,#linkname,#savelink{width:100px;} </style> </head> <body> <!-- 显示窗口的地方 --> <div id="here"></div><a id="clickhere" href="#">点击生成窗口</a> <!-- 要嵌入到窗口的内容 --> <div id="login" style="display:none;"> <form action="#" method="post" onSubmit="return false;"> <table width="400" height="95"> <tr> <td width="78">链接文字</td> <td width="168"><input name="link.name" type="text"/></td> <td width="138" id="linktext"></td> </tr> <tr> <td>链接地址</td> <td><input name="link.url" type="text"/></td> <td id="linkurl"></td> </tr> <tr> <td></td> <td><button type="submit" style="float:right;">添加</button></td> <td id="savelink"></td> </tr> </table> </form> </div> <script type="text/javascript"> var here = document.getElementById("here"); var login = document.getElementById("login"); var clickhere = document.getElementById("clickhere"); clickhere.onclick = function(){ here.appendChild(createdialog(400,95+30,login,"欢迎光临脚本之家",true)); } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
JavaScript 处理Iframe自适应高度(同或不同域名下)
Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈2013-03-03JS 使用 window对象的print方法实现分页打印功能
这篇文章主要介绍了JS 使用 window对象的print方法实现分页打印功能,这种方法兼容性比较好,在ie和火狐浏览器下都可以正常使用,感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
最新评论