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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
jquery css实现流程进度条
Mar 26 jQuery
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
php递归删除目录与文件的方法
2015/01/30 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
javascript 函数调用规则
2009/08/26 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
通用C#笔试题附答案
2016/11/26 面试题
区域总监的岗位职责
2013/11/21 职场文书
事业单位请假制度
2014/01/13 职场文书
高中物理教学反思
2014/02/08 职场文书
主办会计岗位职责
2014/03/13 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
用python自动生成日历
2021/04/24 Python
python中mongodb包操作数据库
2022/04/19 Python