JavaScript 图片弹框显示

        function fnCreate(src) {

            /* 要创建的div的classname */

            var ClassName = "thumbviewbox" ;

 

            if (src == '' ) {

                return false ;

            }

 

           /* 优先创建图片，如果图片没有加载成功，回调自己 */

            var img = document.createElement('img' );

            img.setAttribute( 'src', src);

         //显示图片的大小

            var imgwd = "300px" ;

            var imghg = "300px" ;

 

            if (imgwd < 1) {

                var timer = setTimeout("fnCreate('" + src + "')", 100);

                return false ;

            } else {

                clearInterval(timer);

            }

 

            /* 清除已经弹出的窗口，防止冒泡 */

            em = document.getElementsByClassName(ClassName)

 

            for (var i = em.length - 1; i >= 0; i--) {

                var p = em[i];

                p.parentNode.removeChild(p);

            }

 

           /* 各项参数 */

            var htmlWidth = window.innerWidth;             //可见区域宽度

            var htmlHeight = window.innerHeight;           //可见区域高度

            var divleft = 0;                                                 //将要创建的div的左边距

            var divtop = 0;                                                //将要创建的div的右边距

            var closefunction = 'em=document.getElementsByClassName("' + ClassName + '");for(var i=em.length-1;i>=0;i--){var p=em[i];p.parentNode.removeChild(p);}';     //关闭div的代码

 

            img.setAttribute( 'onclick', closefunction);

 

           /* 计算通过图片计算div应该在的位置，保证弹窗在页面中央 */

            if (imgwd > htmlWidth * 0.8) {

                img.setAttribute( 'width', htmlWidth * 0.8);

                divleft = htmlWidth * 0.1;

                if (imghg > htmlHeight * 0.8) {

                    divtop = htmlHeight * 0.1;

                } else {

                    divtop = (htmlHeight - imgwd) / 2;

                }

            } else {

                img.setAttribute( 'width', imgwd);

                divleft = (htmlWidth - imgwd) / 2;

                if (imghg > htmlHeight * 0.8) {

                    divtop = htmlHeight * 0.1;

                }

                else {

                    divtop = (htmlHeight - imgwd) / 2;

                }

            }

 

            /* 创建关闭按钮 */

            var closebtn = document.createElement('a');

            closebtn.setAttribute( 'class', 'close' );

            closebtn.setAttribute( 'href', 'javascript:;' );

            closebtn.setAttribute( 'style', 'position:absolute;top:-20px;right:-5px;cursor:pointer;background:#444;color:#FFF;' );

            closebtn.innerHTML = '[close/关?闭??]';

            closebtn.setAttribute( 'onclick', closefunction);

 

            /* 创建弹窗 */

            var element = document.createElement('div');

            element.appendChild(img);

            element.appendChild(closebtn);

            element.setAttribute( 'class', ClassName);

            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;' );

            document.body.appendChild(element);

        }

转载于:https://www.cnblogs.com/liusuqi/p/3147582.html