声明

阅读本文需要有一定的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>

显示效果如下：

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

<!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实现弹出层效果的简单实例

    转自:https://www.jb51.net/article/85475.htm 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 ...

  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. 算法总结—深度优先搜索DFS

    深度优先搜索(DFS) 往往利用递归函数实现(隐式地使用栈). 深度优先从最开始的状态出发,遍历所有可以到达的状态.由此可以对所有的状态进行操作,或列举出所有的状态. 1.poj2386 Lake C ...

  2. UIView的生命周期总结

    序言: loadView.viewDidLoad.viewDidAppear.initWithNibName.awakeFromNib等经常出现在UIViewController中的方法介绍. 这些方 ...

  3. 简要地写出一个.NET Remoting的示例

    在VS 2008中添加新的类库项目,并命名为NetRmClass,将所属解决方案命名为NetRm,勾选“创建解决方案的目录”.这样,NetRmClass类库项目目录即属于NetRm解决方案,并可以继续 ...

  4. 1.6.6 De-Duplication(重复数据删除)

    1. 重复数据删除 solr通过<Signature>类的类型来支持重复数据删除技术的.一个Signature可以通过以下几种方式实现:  方法 描述  MD5Signature  128 ...

  5. 在Archlinux ARM - Raspberry Pi上安装Google coder

    升级软件包 一个 pacman 命令就可以升级整个系统.花费的时间取决于系统有多老.这个命令会同步非本地(local)软件仓库并升级系统的软件包: # pacman -Syu 提示:确保make以及g ...

  6. [WinForm] 使用反射将业务对象绑定到窗体或控件容器

    在WebForm中,可以使用反射将业务对象绑定到 ASP.NET 窗体控件.最近做Winform项目,也参考WebForm中的代码实现同样的功能.     Winform没有提供类似WebForm中的 ...

  7. [WinForm] TableLayoutPanel和FlowLayoutPanel的使用

    这篇文章主要跟大家分享下,在配餐系统的开发中,对tableLayoutPanel 和 flowLayoutPanel 控件的使用方法和技巧 ——后附上 测试demo, 相信需要的朋友下载看后能很快的知 ...

  8. 通用权限管理系统接口文档V4.2 版本之消息接口介绍

    通用权限管理系统提供的消息接口可实现消息获取,消息发送,底层使用Redis对消息进行缓存,解决消息的并发请求对数据库的压力. 前端可以通过客户端轮询来获取最新消息,前端效果截图如下:

  9. 解决eclipse配置Tomcat时找不到server选项

    集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在Eclipse中,窗口(window)——首选项(preferences)——服务器(Server)——运行时环境( ...

  10. angularJs中上传图片/文件功能：ng-file-upload

    原文技术交流:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/ 在做网站的过程中难 ...