转自：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. MySQL的内存表（转）

    说明:MySQL内存表可以提升一些临时业务的查询,比如做Session的共享,一些类似缓存的数据等. “内存表”顾名思义创建在内存中的表,真是这样吗?其实不然,MySQL的内存表,表结构创建在磁盘上, ...

  2. NSURLConnection和NSMutableURLRequest 实现同步、异步请求

    我是走向ios的一个小书童,我有很多不懂的,新鲜的知识去学习,去掌握! 我首先要吐槽一下: 那些不负责的博友!你分享知识本来是好事!可是你直接Control+V就是你的不对了! 尼玛,直接Contro ...

  3. Android Studio一些常用的快捷键

    光标移动和窗口切换:1.esc:光标从功能窗口回到编辑窗口 2.alt+num:打开指定的功能窗口,重复操作关闭该窗口. 3.alt+←→:切换编辑的文件. 4.ctrl+home/end:跳转到文件 ...

  4. 【转】 使用 Python 获取 Linux 系统信息

    在本文中,我们将会探索使用Python编程语言工具来检索Linux系统各种信息.走你. 哪个Python版本? 当我提及Python,所指的就是CPython 2(准确的是2.7).我会显式提醒那些相 ...

  5. C++学习总结 复习篇2

      延续上一小节内容:下面继续讲解虚函数和多态 虚函数和多态 基类指针可以指向任何派生类的对象,但是不能调用派生类对象的成员. 但是,基类可以调用覆盖了虚函数的函数.(现在调用将来,这有问题,说明现在 ...

  6. NSArray中存的是实体时的排序

    NSArray中存储的是实体时的排序 by 伍雪颖 NSSortDescriptor *sortDescriptor1 = [NSSortDescriptor sortDescriptorWithKe ...

  7. 【转载】C#中的泛型

    1.1 C#中的泛型 .Net 1.1版本最受诟病的一个缺陷就是没有提供对泛型的支持.通过使用泛型,我们可以极大地提高代码的重用度,同时还可以获得强类型的支持,避免了隐式的装箱.拆箱,在一定程度上提升 ...

  8. C#3.0之神奇的Lambda表达式和Lambda语句

    “Lambda 表达式”是一个匿名函数,它可以包含表达式和语句,并且可用于创建委托或表达式目录树类型.所有 Lambda 表达式都使用 Lambda 运算符 =>,该运算符读为“goes to” ...

  9. attribute constructor&destructor

    attribute constructor&destructor 在看openwrt里libnl-tiny这个库的时候,遇到了C里面的构造函数这个概念. static void __init ...

  10. PandoraBox 支持3G无线上网卡(联通卡3G卡)（一）

    一:笔者采用的是系统是OpenWrt之PandoraBox,内核版本3.3.8:硬件设备是MTK的7620开发板. 其中怎么搭建openwrt开发环境在此不用多说,因为既然想实现3G无线上网卡拨号上网 ...