JS实现新浪微博效果带遮罩层的弹出框代码


Posted in Javascript onOctober 12, 2015

本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码。分享给大家供大家参考。具体如下:

这是一款新浪微博效果的弹出框,现成的JS代码,兼容IE6+,以及各主流浏览器。新浪微博弹出层并可拖拽,操作轻松舒适,符合用户的浏览习惯,将代码推荐给各位网友。

运行效果截图如下:

JS实现新浪微博效果带遮罩层的弹出框代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层并可拖拽</title>
<style>
body,html{height:2000px;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
*html #overlay{position:absolute;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
 var shit = !-[1, ];
 var oWin = document.getElementById("win");
 var oLay = document.getElementById("overlay"); 
 var oBtn = document.getElementsByTagName("button")[0];
 var oClose = document.getElementById("close");
 var oH2 = oWin.getElementsByTagName("h2")[0];
 var bDrag = false;
 var disX = disY = 0;
 var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;
 var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
 oBtn.onclick = function ()
 {
  oLay.style.display = "block";
  oWin.style.display = "block";
  shit && (oLay.style.height = document.body.offsetHeight + "px");
 };
 oClose.onclick = function ()
 {
  oLay.style.display = "none";
  oWin.style.display = "none";  
 };
 oClose.onmousedown = function (event)
 {
  (event || window.event).cancelBubble = true;
 };
 oH2.onmousedown = function (event)
 {  
  var event = event || window.event;
  bDrag = true;
  disX = event.clientX - oWin.offsetLeft + iScrollL;
  disY = event.clientY - oWin.offsetTop + iScrollT;  
  this.setCapture && this.setCapture();  
  return false
 };
 document.onmousemove = function (event)
 {
  if (!bDrag) return;
  var event = event || window.event;
  var iL = event.clientX - disX + iScrollL;
  var iT = event.clientY - disY + iScrollT;
  var maxL = document.body.clientWidth - oWin.offsetWidth;
  var maxT = document.body.clientHeight - oWin.offsetHeight;  
  iL = iL < 0 ? 0 : iL;
  iL = iL > maxL ? maxL : iL;   
  iT = iT < 0 ? 0 : iT;
  iT = iT > maxT ? maxT : iT;
  oWin.style.marginTop = oWin.style.marginLeft = 0;
  oWin.style.left = iL + "px";
  oWin.style.top = iT + "px";  
  return false
 };
 document.onmouseup = window.onblur = oH2.onlosecapture = function ()
 {
  bDrag = false;    
  oH2.releaseCapture && oH2.releaseCapture();
 };
};
</script>
</head>
<body>
<div id="overlay"></div>
<div id="win"><h2><span id="close">×</span></h2></div>
<center><button>弹出层</button></center>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 #Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 #Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 #Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
You might like
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
python九九乘法表的实例
2017/09/26 Python
python如何读写json数据
2018/03/21 Python
python访问hdfs的操作
2020/06/06 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
《只有一个地球》教学反思
2014/02/14 职场文书
文科生自我鉴定
2014/02/15 职场文书
中学生演讲稿
2014/04/26 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python