声明

阅读本文需要有一定的HTML、CSS和JavaScript基础

设计

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

实现

Window对象百度一下打开弹出层这里是弹出层内容关闭弹出层); document.getElementById( toast.style.display ; toast.style.position ; window.innerWidth; window.innerHeight; toast.offsetWidth; toast.offsetHeight; toast.style.top ; toast.style.left ; } document.getElementById( toast.style.display ; }

显示效果如下：

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

Window对象百度一下打开弹出层　　这里是弹出层内容　 关闭弹出层　　); ); document.getElementById( cover.style.display ; toast.style.position ; window.innerWidth; window.innerHeight; toast.offsetWidth; toast.offsetHeight; toast.style.top ; toast.style.left ; } document.getElementById( cover.style.display ; }

这是再次测试下效果，如下图：

总结

上述内容只是简单实现了弹出层效果，但是通过添加更多的代码也可以在此基础上实现更复杂的功能。