使用JavaScript实现弹出层效果的简单实例


Posted in Javascript onMay 31, 2016

声明

阅读本文需要有一定的HTML、CSS和JavaScript基础

设计

实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来。

实现

<!DOCTYPE html>
<html>
<head>
  <title>Window对象</title>
  <meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<button type="button" id="open">打开弹出层</button>
<div style="display: none;background: lightblue;border:1px solid green;" id="toast">     <!--   设置display属性为none以隐藏内容       -->
  <p>这里是弹出层内容</p>
  <button type="button" id="close">关闭弹出层</button>
</div>
<script type="text/javascript">
  var toast = document.getElementById("toast");
  document.getElementById("open").onclick = function(e){      <!--  定义点击事件显示隐藏内容     -->
    toast.style.display = "block";
    toast.style.position = "fixed";
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    var targetWidth = toast.offsetWidth;
    var targetHeight = toast.offsetHeight;
    toast.style.top = (winHeight - targetHeight) / 2 + "px";
    toast.style.left = (winWidth - targetWidth) / 2 + "px";
  }
  document.getElementById("close").onclick = function(e){        <!--   将显示的内容再次隐藏     -->
    toast.style.display = "none";
  }
</script>
</body>
</html>

显示效果如下:

使用JavaScript实现弹出层效果的简单实例

但是我们可以注意到,在弹出隐藏内容之后我们还是可以通过链接进入百度页面。为了防止这种情况的发生,我们可以提供遮罩层将原先的页面内容全部遮住。代码如下:

<!DOCTYPE html>
<html>
<head>
  <title>Window对象</title>
  <meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<button type="button" id="open">打开弹出层</button>
<div id="cover" style="display: none;position: fixed;width: 100%;height: 100%;top:0px;left:0px;background: gray;">    <!-- 通过遮罩层遮住背景 -->
  <div style="background: lightblue;border:1px solid green;" id="toast">     <!-- 设置display属性为none以隐藏内容       -->
  <p>这里是弹出层内容</p>
    <button type="button" id="close">关闭弹出层</button>

</div>
</div>
<script type="text/javascript">
  var toast = document.getElementById("toast");
  var cover = document.getElementById("cover");
  document.getElementById("open").onclick = function(e){      <!--  定义点击事件显示隐藏内容     -->
    cover.style.display = "block";
    toast.style.position = "fixed";
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    var targetWidth = toast.offsetWidth;
    var targetHeight = toast.offsetHeight;
    toast.style.top = (winHeight - targetHeight) / 2 + "px";
    toast.style.left = (winWidth - targetWidth) / 2 + "px";
  }
  document.getElementById("close").onclick = function(e){        <!--   将显示的内容再次隐藏     -->
    cover.style.display = "none";
  }
</script>
</body>
</html>

这是再次测试下效果,如下图:

使用JavaScript实现弹出层效果的简单实例

总结

上述内容只是简单实现了弹出层效果,但是通过添加更多的代码也可以在此基础上实现更复杂的功能。

以上这篇使用JavaScript实现弹出层效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现submit提交表单
Feb 03 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
vue的for循环使用方法
Feb 12 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
javascript事件处理模型实例说明
May 31 #Javascript
jQuery基础知识点总结(必看)
May 31 #Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 #Javascript
javascript小数精度丢失的完美解决方法
May 31 #Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 #Javascript
javascript基本语法
May 31 #Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 #Javascript
You might like
Terran剧情介绍
2020/03/14 星际争霸
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
js实现列表向上无限滚动
2020/01/13 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python中os.path用法分析
2015/01/15 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python扫描线填充算法详解
2020/02/19 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python logging模块原理解析及应用
2020/08/13 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
一月红领巾广播稿
2014/02/11 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
研究生求职自荐书
2014/06/23 职场文书
环境科学专业求职信
2014/08/04 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Python的property属性详细讲解
2022/04/11 Python
Django框架模板用法详解
2022/06/10 Python