JavaScript 图片弹框显示

本文介绍了一个使用JavaScript创建图片弹窗的方法。该方法首先检查图片源是否有效,然后创建并设置图片元素,接着计算图片和弹窗的位置以确保其位于页面中央,并添加关闭按钮。最后,文章详细展示了如何创建弹窗及其相关元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值