使用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 相关文章推荐
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
基于iview的router常用控制方式
May 30 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
php中几种常见安全设置详解
2010/04/06 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python入门篇之字典
2014/10/17 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
巴西购物网站:Onofre Agora
2020/06/08 全球购物
英文留学推荐信范文
2014/01/25 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
入党介绍人考察意见
2015/06/01 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
java中如何截取字符串最后一位
2022/07/07 Java/Android