首页 / JAVASCRIPT / 遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5069字，纯文字阅读大概需要8分钟。

内容图文

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

遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法） - 文章图片

基于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分别实现了遮罩层点击按钮弹出并且具有拖动和关闭效果，希望对大家有所帮助。

内容总结

以上是互联网集市为您收集整理的遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）全部内容，希望文章能够帮你解决遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/356505.html

来源：【匿名】

【上一篇】js脚本分页代码分享（7种样式）【下一篇】javascript 怎么调用php方法

更多 ►

【遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）】教程文章相关的互联网学习教程文章

JavaScript归并方法reduce()和reduceRight()【代码】

ECMAScript 5还新增了两个归并数组的方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。reduce()和reduceRight()函数接收4个参数：前一个值当前值项的索引数组对象。这个函数返回任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此...

javaScript的难度开头---使用call方法和apply方法【代码】

javaScript 的组合继承1，使用 call 方法定义：调用一个对象的一个方法，以另一个对象替换当前对象。<!DOCTYPE html> <html><head><title>借用构造函数</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=gbk"></head>...

Javascript闭包深入解析及实现方法【代码】【图】

1、什么是闭包闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中...

JavaScript indexOf() 方法和 lastIndexOf() 方法【代码】

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。语法：indexOf() ： stringObject.indexOf(searchvalue,fromindex) lastIndexOf() ： stringObject.lastIndexOf(searchvalue,fromindex) 参数描述searchvalue必需。规定需检索的字符串值。fromindexindexOf()：可选的整数参数。规定在字符串中开始...

【JavaScript】javascript 方法 test()【图】

个人理解：var b = x.test(y); y是否存在模式x中，返回true或false；x可以是正则，字符串，原文：http://www.cnblogs.com/oiliu/p/4865906.html

javascript判断鼠标按键和键盘按键的方法【代码】

在网站前端设计时，通过键盘来控制页面状态的变化，比如up,down,pageUp,pageDown等来进行网站的滚动。目前，html5的发展带来了新的游戏体验，因此按键操作必不可少。1.监听鼠标按键。任何按键操作必然有个监听者和响应者，因此鼠标按键也不例外。在js事件操作中,onMousedown用来监听鼠标按键操作。 <html> <head> <title>js判断鼠标左、中、右键哪个被点击-柯乐义</title> <script type="text/javascript"> functi...

JavaScript中的数组遍历forEach()与map()方法以及兼容写法【代码】

原文链接：https://www.cnblogs.com/jocyci/p/5508279.html 原理：高级浏览器支持forEach方法语法：forEach和map都支持2个参数：一个是回调函数（item,index,list）和上下文；forEach:用来遍历数组中的每一项；这个方法执行是没有返回值的，对原来数组也没有影响；数组中有几项，那么传递进去的匿名回调函数就需要执行几次；每一次执行匿名函数的时候，还给其传递了三个参数值：数组中的当前项item,当前项的索引index,原始数组inpu...

JavaScript学习总结--创建对象（6_其他方法）【代码】

前面我们一共介绍了四种方法用来封装对象（工厂，构造模式，原型模式，构造+原型），并且重点对构造函数+原型模式做了一些改进，使之更加完美，那么除了这几种方法，还有两种方式用来封装对象，还是那句话，选择适合自己的（其实每种方法都各有利弊，在我刚开始学习时总感觉就是拆东墙补西墙）。首先来看第一种方法function Person(name,age){var o=new Object();o.name=name;o.age=age;o.sayName=function(){console.log(this.na...

javascript刷新父页面方法总结【图】

用iframe、弹出子页面刷新父页面iframeJs代码 <script language=JavaScript> parent.location.reload(); </script> 弹出子页面Js代码 <script language=JavaScript> window.opener.location.reload(); </script> 子窗口刷新父窗口Js代码 <script language=JavaScript> self.opener.location.reload(); </script> 刷新以open()方法打开的窗口Js代码 <script language=JavaScript> window.opener.loca...

零散的JavaScript公用方法【代码】

Javascript操作元素属性方法总结

?1234567891011121314151617181920<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title></title></head><body> <!-- 元素属性的操作第一种：oDiv.style.display="none"; 第二种：oDiv.style["display"]="none"; 第三种：Dom方式 Dom方式操作元素的属性获取：getAttribute(名称);//...

javascript避免数字计算精度误差的方法详解

本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助如果我问你 0.1 + 0.2 等于几？你可能会送我一个白眼，0.1 + 0.2 = 0.3 啊，那还用问吗？连幼儿园的小朋友都会回答这么小儿科的问题了。但是你知道吗，同样的问题放在编程语言中，或许就不是想象中那么简单的事儿了。不信？我们先来看一段 JS。var numA = 0.1; var numB = 0.2; alert( (numA + numB) === 0.3 );执行...

JavaScript字符串转数字有什么方法【代码】

JavaScript是一个神奇的语言，字符串转数字有5种方法，各有各的坑法!接下来通过本文给大家介绍JavaScript字符串转数字的5种方法及其陷阱，感兴趣的朋友一起看看吧　选择哪一种呢？什么时候选择它？为什么选择这种它？我们逐一进行分析，并解析每种方式的常见陷阱。parseInt　　根据http://JsPerf.com的基准测试，大多数浏览器对parseInt的响应最佳。虽然它是最快的方式，但使用preseInt会碰到一些常见陷阱：parseInt(‘08‘) // re...

<JavaScript> 六. window对象的属性和方法【代码】

1<!DOCTYPE html> 2<html> 3<head> 4<title></title> 5<script type="text/javascript"> 6/* 7 BOM: Browser Object Model 浏览器对象模型8 提供了访问和操作浏览器各组件的方式9 10 window: 浏览器窗口 JS中最大的对象, 其它对象都是它的子对象11 location: 地址栏12 histroy: 浏览记录13 screen: 显示器屏幕获取屏幕的相关信息14 navigator: 浏览器软件判断客户用的什么浏览器软件15 document: ...

Javascript创建对象几种方法解析【代码】

Javascript创建对象几种方法解析Javascript面向对象编程一直是面试中的重点，将自己的理解整理如下，主要参考《Javascript高级程序设计第三版》，欢迎批评指正。通过字面量形式，创建对象: var person_1 = {name: "userName",age: 20}工厂模式创建对象通过一个构造函数接收参数的方式构造对象，可无数次调用这个函数，通过改变参数构造不同的对象 function createPerson(name,age){var o = new Object();//创建...

首页 / JAVASCRIPT / 遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程