Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Javascript code with very beautiful pop-up layer effects</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 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.111cn.netvar 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;}}}</script></head><body >Simple code-like lightbox pop-up<style type="text/css">. Pop {border: 8px solid skyblue; width: 400px; background: # fff; padding: 12px; display: none ;}</style>Click to pop up<div class="pop" id="pop">Click Close</div><script type="text/javascript">BtPopShow ("open", "pop"); BtPopHide ("close", "pop ")</script></body></html></td> </tr></table>
Tip: you can modify some code before running
