转自：https://www.jb51.net/article/85475.htm

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

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

显示效果如下：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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实现弹出层效果的简单实例的更多相关文章

  1. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

  2. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  3. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  4. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  5. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  6. 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox）

    下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下:   像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...

  7. 求出数组中所有数字的和&&弹出层效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 实现弹出层效果

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  9. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

随机推荐

  1. 如何细粒度地控制你的MyBatis二级缓存(mybatis-enhanced-cache插件实现)

    前几天网友chanfish 给我抛出了一个问题,笼统地讲就是如何能细粒度地控制MyBatis的二级缓存问题,酝酿了几天,觉得可以写个插件来实现这个这一功能.本文就是从问题入手,一步步分析现存的MyBa ...

  2. Java8期间及持续时间

    原文:http://www.yiibai.com/java8/java8_periodduration.html 使用Java8,两个专门类引入来处理时间差. Period - 处理有关基于时间的日期 ...

  3. Action Bar详解(二）

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果. 一.添加A ...

  4. 创建es索引-格式化和非格式化

    创建es索引-格式化和非格式化 学习了:https://www.imooc.com/video/15768 索引有结构化和非结构化的区分: 1, 先创建索引,然后POST修改mapping 首先创建索 ...

  5. Linux下的ELF可执行文件的格式解析 （转）

    LInux命令只是和Kernel一起被编译进操作系统的存在于FS的ELF格式二进制文件,或者权限足够的脚本,或者一个软链 ELF(Executable and Linking Format)是一种对象 ...

  6. YII 多子域名同步登录

    a.meylou.com和b.meylou.com不做登录.c.meylou.com这个专门做用户登录.c站登录之后a,b站点同时登录. 第一步:修改php.ini配置文件,把cookie_domai ...

  7. oracle user locke

    1:管理员登录 sqlplus sys/pwd as sysdba sql->alter user jd account unlock; commit; SQL> password new ...

  8. 【数据结构】二叉树(c++)

    头文件: #include <iostream> using namespace std; template<class Type> class Bintree; //结点类 ...

  9. Ubuntu 16.04 同时使用python3.5

    Python 3.x版本使用pip3,它会把你想下载的包放到usr/local/lib/python3.5/dist-packages/下,而非usr/local/lib/python2.7/dist ...

  10. cmd下并行执行appium +maven+Testng test

    1: first: open two command wins to start appium: appium -p 4725 -bp 4726 -U EP7333W0UR appium -p 472 ...