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


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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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 If Else(elsefi) 语句
2013/04/07 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python属于软件吗
2020/06/18 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python如何将字符串转换为日期
2020/07/31 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
股东协议书范本
2014/04/14 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
年终工作总结范文2014
2014/11/27 职场文书
经费申请报告范文
2015/05/18 职场文书
课题研究阶段性总结
2015/08/13 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书