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


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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
layDate插件设置开始和结束时间
Nov 15 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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 文件状态缓存带来的问题
2008/12/14 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
第五章 php数组操作
2011/12/30 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
微信小程序多音频播放进度条问题
2018/08/28 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
深入理解python try异常处理机制
2016/06/01 Python
详解supervisor使用教程
2017/11/21 Python
python对html过滤处理的方法
2018/10/21 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python多线程和多进程关系详解
2020/12/14 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
学期自我鉴定
2013/11/04 职场文书
环保倡议书100字
2014/05/15 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
领导工作表现评语
2015/01/04 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis