遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)


Posted in Javascript onAugust 20, 2015

首先给大家展示演示效果:

遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)

基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定、反应快速。代码表现方面,简洁务实,不玩虚的,拿去学习也相当不错。

js代码

示例一:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>弹出层并可拖拽</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
li{ list-style-type:none}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
#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 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;
oBtn.onclick = function ()
{
oLay.style.display = "block";
oWin.style.display = "block"
};
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;
disY = event.clientY - oWin.offsetTop;
this.setCapture && this.setCapture();
return false
};
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.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>
<meta charset="utf-8">
</head>
<body>
<div id="overlay"></div>
<div id="win"><h2><span id="close">×</span></h2>
<li><a href='http://www.100sucai.com' target='_blank'>http://www.100sucai.com</a></li>
<li><a href="http://www.100sucai.com/web/jquerytexiao/CSS3heHtml5" title="CSS3和Html5">CSS3和Html5</a></li>
<li><a href="http://www.100sucai.com/web/jquerytexiao/tubiaoyutuxing" title="图表与图形">图表与图形</a></li>
</div>
<center><button>弹出层</button></center>
</body>
</html><br />

         jq代码:

  代码示例二:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery弹出层效果</title>
<meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />
<meta content="jQuery弹出层效果,有关闭按钮,代码简单易懂,你可以随意修改弹出层的参数。" name="description" />
<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>

以上通过jq和js分别实现了遮罩层点击按钮弹出并且具有拖动和关闭效果,希望对大家有所帮助。

Javascript 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
13个PHP函数超实用
Oct 21 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
You might like
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript中的new使用
2010/03/20 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
10款最好的Python开发编辑器
2019/07/03 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
考博专家推荐信模板
2013/12/02 职场文书
低碳环保演讲稿
2014/08/28 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
小学生校园广播稿
2014/09/28 职场文书
经营目标责任书
2015/05/08 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript