教程集 > 脚本编程 > javascript > 正文 Javascript 弹出层效果代码

Javascript 弹出层效果代码

发布时间：2016-11-26 编辑：jiaochengji.com

教程集为您提供Javascript 弹出层效果代码等资源，欢迎您收藏本站，我们将为您提供最新的Javascript 弹出层效果代码资源

弹出层效果是我们常用的一个功能，下面我介绍一个兼容主浏览器的纯js 弹出层效果代码，有需要了的朋友可参考。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出层效果</title> <style> html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;} h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;} h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} </style> <script> window.onload = function () { var oWin = document.getElementById("win"); var oLay = document.getElementById("overlay"); var oBtn = document.getElementsByTagName("button")[0]; var oClose = document.getElementById("close"); oBtn.onclick = function () { oLay.style.display = "block"; oWin.style.display = "block" }; oClose.onclick = function () { oLay.style.display = "none"; oWin.style.display = "none" } }; </script> </head> <body>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
点击弹出层外区域关闭弹出层jquery特效示例
 jquery实现点击弹出层效果的简单实例
 jquery 点击按钮弹出层点击空白处隐藏层的实现代码
 Javascript 弹出层效果代码
 js延时弹出层控制效果代码
 jquery使用ColorBox弹出图片组浏览层实例演示
 jquery win 7透明弹出层效果的简单代码
 jQuery浮动窗口插件 jqFloatBox
漂亮的jquery提示效果(仿腾讯弹出层)
javascript弹出层锁定弹出层以外不可点击

上一篇：右边导航菜单下一篇：yahoo选项卡切换效果代码

[关闭]

Javascript 弹出层效果代码

最近更新

浏览排行