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


Posted in Javascript onAugust 06, 2015

本文实例讲述了JS实现弹出浮动窗口。分享给大家供大家参考。具体如下:

这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧。

关于一些参数说明:

bodycontent:要在窗口中显示的内容
title:窗口的标题
removeable:窗口是否能拖动

注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度。

注:在火狐或chrome下效果最佳,IE8下可能有些小问题。

点击此处查看运行效果:

运行效果图如下:

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

具体代码:

<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_3water_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 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 #Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
You might like
表单提交验证类
2006/07/14 Javascript
Javascript的闭包
2009/12/31 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
Python实现批量下载文件
2015/05/17 Python
Python的语言类型(详解)
2017/06/24 Python
Python匿名函数及应用示例
2019/04/09 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
基于python实现文件加密功能
2020/01/06 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
四年大学生活的自我评价范文
2014/02/07 职场文书
法律进社区实施方案
2014/03/21 职场文书
环保建议书500字
2014/05/14 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电