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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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中计算时间差的几种方法
2009/12/31 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Python输出带颜色的字符串实例
2017/10/10 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
优秀员工年终发言演讲稿
2014/01/01 职场文书
利群广告词
2014/03/20 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
考博导师推荐信范文
2015/03/27 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫