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 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
vue a标签点击实现赋值方式
Sep 07 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
php URL验证正则表达式
2011/07/19 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
深入php多态的实现详解
2013/06/09 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
解密效果
2006/06/23 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
Node.js之readline模块的使用详解
2019/03/25 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python 调用PIL库失败的解决方法
2019/01/08 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
党员创先争优心得体会
2014/09/11 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
先进工作者推荐材料
2014/12/23 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python