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

Javascript非常漂亮弹出层效果代码

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

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

本文章给大家介绍这款弹出层效果是一款百常不错的线js写的，有点像jquery的lightbox弹出层效果哦，但使用方法超级简单，下面给大家分享。

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

<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>Javascript非常漂亮弹出层效果代码</title> <style type="text/css"> * {margin:0;padding:0;list-style:none;font-size:12px;line-height:20px;font-family:Arial;} h1,h2,h3 { font-size:14px; margin:10px 0;} hr { margin:10px 0; height:1px;clear:both;border:0; background:#c00;} a:link,a:visited{color:#164A84;text-decoration:none;} a:hover,a:active{color:#c00;text-decoration:underline;} table { border-collapse:collapse;border:1px solid #ccc;border-width:1px 1px 0 0; margin-left:20px;} td,th { padding:5px;border:1px solid #ccc;border-width:0 0 1px 1px;} </style> <script type="text/javascript"> function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}} function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}} function BtTabRemove(index,head,divs) { var tab_heads = document.getElementById(head); if (tab_heads) { var lis = tab_heads.getElementsByTagName("li"); var as = tab_heads.getElementsByTagName("a"); for(var i=0;i<as.length;i ){lis[i].className = "";BtHide(divs "_" i);if (i==index) {lis[i].className = "current";}} BtShow(divs "_" index)} } function BtPopload(showId){// http://www.jiaochengji.com var h = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) 'px'; var w = document.documentElement.scrollWidth 'px'; var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;" var exsit = document.getElementById("popBox"); if (!exsit) { pop_Box = document.createElement("div");pop_Box.id = "popBox"; document.getElementsByTagName("body")[0].appendChild(pop_Box); pop_Box.style.cssText = popCss;pop_Box.style.zIndex = "10"; pop_Box.style.height = h;pop_Box.style.width = w; pop_Iframe = document.createElement("iframe");pop_Iframe.id = "popIframe"; document.getElementsByTagName("body")[0].appendChild(pop_Iframe); pop_Iframe.style.cssText = popCss;pop_Iframe.style.zIndex = "9"; pop_Iframe.style.height = h;pop_Iframe.style.width = (parseInt(w)-5) "px"; } BtShow("popIframe");BtShow("popBox");BtShow(showId); pop_Win = document.getElementById(showId); pop_Win.style.position = "absolute"; pop_Win.style.zIndex = "11"; pop_Win.style.top = document.documentElement.scrollTop document.documentElement.clientHeight/2-pop_Win.offsetHeight/2 'px'; pop_Win.style.left = (document.documentElement.clientWidth/2-pop_Win.offsetWidth/2) 'px'; } function BtPopShow(Bid,Did) { var UploadBtn = document.getElementById(Bid); if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}} } function BtPopHide(Bid,Did) { var UploadBtn = document.getElementById(Bid); if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}} } 点击关闭

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

您可能感兴趣的文章：
Javascript非常漂亮弹出层效果代码
 Photoshop设计逼真漂亮雪景制作教程
 photoshop制作出漂亮花朵教程
 漂亮的jquery提示效果(仿腾讯弹出层)
Illustrator网格工具绘制漂亮的北极光效果教程
 Photoshop利用滤镜制作漂亮绚丽烟花教程
 photoshop制作漂亮心形云彩教程
 photoshop制作漂亮的星光笔刷效果教程
 Illustrator设计一款漂亮的签名档制作教程
 漂亮的仿国外网站图片展示效果

上一篇：js实现图片文字滑动效果下一篇：兼容ie,ff浏览屏蔽右键菜单

[关闭]

Javascript非常漂亮弹出层效果代码

最近更新

浏览排行