使用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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
Angular实现响应式表单
Aug 04 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 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
一个显示天气预报的程序
2006/10/09 PHP
PHP学习笔记之二
2011/01/17 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php生成图片验证码的方法
2016/04/15 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
Node.js简单入门前传
2017/08/21 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python虚拟环境完美部署教程
2019/08/06 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Oracle快照(snapshot)
2015/03/13 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
优秀食品类广告词
2014/03/19 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
Go使用协程交替打印字符
2021/04/29 Golang