JavaScript 图片弹框显示

function fnCreate(src) {

[align=left] /* 要创建的div的classname */[/align]
[align=left] var ClassName = "thumbviewbox" ;[/align]
[align=left] [/align]
[align=left] if (src == '' ) {[/align]
[align=left] return false ;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] /* 优先创建图片，如果图片没有加载成功，回调自己 */[/align]
[align=left] var img = document.createElement('img' );[/align]
[align=left] img.setAttribute( 'src', src);[/align]
[align=left] //显示图片的大小[/align]
[align=left] var imgwd = "300px" ;[/align]
[align=left] var imghg = "300px" ;[/align]
[align=left] [/align]
[align=left] if (imgwd < 1) {[/align]
[align=left] var timer = setTimeout("fnCreate('" + src + "')", 100);[/align]
[align=left] return false ;[/align]
[align=left] } else {[/align]
[align=left] clearInterval(timer);[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] /* 清除已经弹出的窗口，防止冒泡 */[/align]
[align=left] em = document.getElementsByClassName(ClassName)[/align]
[align=left] [/align]
[align=left] for (var i = em.length - 1; i >= 0; i--) {[/align]
[align=left] var p = em[i];[/align]
[align=left] p.parentNode.removeChild(p);[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] /* 各项参数 */[/align]
[align=left] var htmlWidth = window.innerWidth; //可见区域宽度[/align]
[align=left] var htmlHeight = window.innerHeight; //可见区域高度[/align]
[align=left] var divleft = 0; //将要创建的div的左边距[/align]
[align=left] var divtop = 0; //将要创建的div的右边距[/align]
[align=left] var closefunction = 'em=document.getElementsByClassName("' + ClassName + '");for(var i=em.length-1;i>=0;i--){var p=em[i];p.parentNode.removeChild(p);}'; //关闭div的代码[/align]
[align=left] [/align]
[align=left] img.setAttribute( 'onclick', closefunction);[/align]
[align=left] [/align]
[align=left] /* 计算通过图片计算div应该在的位置，保证弹窗在页面中央 */[/align]
[align=left] if (imgwd > htmlWidth * 0.8) {[/align]
[align=left] img.setAttribute( 'width', htmlWidth * 0.8);[/align]
[align=left] divleft = htmlWidth * 0.1;[/align]
[align=left] if (imghg > htmlHeight * 0.8) {[/align]
[align=left] divtop = htmlHeight * 0.1;[/align]
[align=left] } else {[/align]
[align=left] divtop = (htmlHeight - imgwd) / 2;[/align]
[align=left] }[/align]
[align=left] } else {[/align]
[align=left] img.setAttribute( 'width', imgwd);[/align]
[align=left] divleft = (htmlWidth - imgwd) / 2;[/align]
[align=left] if (imghg > htmlHeight * 0.8) {[/align]
[align=left] divtop = htmlHeight * 0.1;[/align]
[align=left] }[/align]
[align=left] else {[/align]
[align=left] divtop = (htmlHeight - imgwd) / 2;[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] /* 创建关闭按钮 */[/align]
[align=left] var closebtn = document.createElement('a');[/align]
[align=left] closebtn.setAttribute( 'class', 'close' );[/align]
[align=left] closebtn.setAttribute( 'href', 'javascript:;' );[/align]
[align=left] closebtn.setAttribute( 'style', 'position:absolute;top:-20px;right:-5px;cursor:pointer;background:#444;color:#FFF;' );[/align]
[align=left] closebtn.innerHTML = '[close/关?闭??]';[/align]
[align=left] closebtn.setAttribute( 'onclick', closefunction);[/align]
[align=left] [/align]
[align=left] /* 创建弹窗 */[/align]
[align=left] var element = document.createElement('div');[/align]
[align=left] element.appendChild(img);[/align]
[align=left] element.appendChild(closebtn);[/align]
[align=left] element.setAttribute( 'class', ClassName);[/align]
[align=left] element.setAttribute( 'style', 'border:5px solid #444;position:absolute;top:' + Math.round(divtop) + 'px;left:' + Math.round(divleft) + 'px;border-radius:5px;background:#FFF;z-index:9999;' );[/align]
[align=left] document.body.appendChild(element);[/align]
[align=left] }[/align]