使用Java脚本语言实现弹出层效果的简单实例

声明

阅读本文需要有一定的HTML、CSS和Java脚本语言基础

设计

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

实现

！DOCTYPE htmlhtmlhead titleWindow对象/title meta charset=' utf-8 '/head mdya href=' http://www .百度。' com '百度一下/abutton type='button' id='open '打开弹出层/button div style=' display : none；背景：浅蓝色；'border:1px纯绿色；id='吐司！-设置显示属性为没有人以隐藏内容- p这里是弹出层内容/p按钮类型='button' id='close '关闭弹出层/button/div脚本类型=' text/JavaScript ' var toast=document。getelementbyid(' toast ')；document.getElementById('open ').onclick=function(e){！-定义点击事件显示隐藏内容干杯。风格。display=' block吐司。风格。位置='固定'；var winWidth=window . innerwidth var WinHeight=window。innerHeightvar目标宽度=吐司。用.抵消；var目标高度=吐司。偏移光线；吐司。风格。top=(WinHeight-TargetHeight)/2 ' px '；吐司。风格。left=(Winwidth-TargetWidth)/2“px”；}文档。getelementbyid(' close ').onclick=function(e){！-将显示的内容再次隐藏干杯。风格。显示='无'；}/脚本/正文/html显示效果如下：

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

！DOCTYPE htmlhtmlhead titleWindow对象/title meta charset=' utf-8 '/head mdya href=' http://www .百度。' com '百度一下/abutton type='button' id='open '打开弹出层/button div id=' cover ' style=' display : none；位置：固定；宽度： 100%;高度： 100%;top :0 pxleft :0 pxbackground : gray！-通过遮罩层遮住背景- div style='background:浅蓝色；'border:1px纯绿色；id='吐司！-设置显示属性为没有人以隐藏内容- p这里是弹出层内容/p按钮类型='button' id='close '关闭弹出层/button/div/div脚本类型=' text/JavaScript ' var toast=document。getelementbyid(' toast ')；var cover=文档。getelementbyid(' cover ')；document.getElementById('open ').onclick=function(e){！-定义点击事件显示隐藏内容掩护。风格。display=' block吐司。风格。位置='固定'；var winWidth=window . innerwidth var WinHeight=window。innerHeightvar目标宽度=吐司。用.抵消；var目标高度=吐司。偏移光线；吐司。风格。top=(WinHeight-TargetHeight)/2 ' px '；吐司。风格。left=(Winwidth-TargetWidth)/2“px”；}文档。getelementbyid(' close ').onclick=function(e){！-将显示的内容再次隐藏掩护。风格。显示='无'；}/脚本/正文/html这是再次测试下效果，如下图：

总结

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

以上这篇使用Java脚本语言实现弹出层效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。