转自：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. SQL Server I/O Basics

     SQL Server I/O Basics Chapter 1http://www.microsoft.com/technet/prodtechnol/sql/2000/maintain/sqlIO ...

  2. 深入理解iPhone数据持久化(手把手教你iphone开发 – 基础篇)

    在所有的移动开发平台数据持久化都是很重要的部分:在j2me中是rms或保存在应用程序的目录中,在symbian中可以保存在相应的磁盘目录中和数据库中.symbian中因为权限认证的原因,在3rd上大多 ...

  3. 最近遇到的C++数字和字符串的转换问题

    1. 用itoa 和atoi  在头文件#include<cstidlib> itoa用法: char * itoa ( int value, char * str, int base ) ...

  4. [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)

    Do you get lost when working with functions and the new keyword? Prototypal inheritance can be compl ...

  5. Qt中 QString 和int，double等的转换

    Qt中 int ,float ,double转换为QString 有两种方法 1.使用 QString::number(); 如: long a = 63; QString s = QString:: ...

  6. Android逆向利器和smali代码修改出错举例-入参类型

    当smali修改代码出错举例1,log如下: 虚拟机层次: 1.本身做出了预测,寄存器v2是符合要求入参,暗示你这个也许是你想要的.VFY: register1 v2 type 17, wanted ...

  7. MaterialImageLoading

    https://github.com/eltld/MaterialImageLoading

  8. 聊聊高并发（三十二）实现一个基于链表的无锁Set集合

    Set表示一种没有反复元素的集合类,在JDK里面有HashSet的实现,底层是基于HashMap来实现的.这里实现一个简化版本号的Set,有下面约束: 1. 基于链表实现.链表节点依照对象的hashC ...

  9. bootstrap-Table服务端分页，获取到的数据怎么再页面的表格里显示

    <table class="table table-hover" id="userTable" > <thead> <tr> ...

  10. python 爬虫1 開始，先拿新浪微博開始

    刚刚開始学. 目的地是两个.一个微博,一个贴吧 存入的话,临时还没想那么多.先存到本地目录吧 分词和推荐后面在整合 mysql mongodb hadoop redius 后面在用 我最终知道为什么大 ...