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

JavaScript 图片弹框显示的更多相关文章

  1. JavaScript实现弹框

    提起JS弹框,我首先想到的是Alert,然后想到的还是Alert,最后我竟然就只知道Alert.然后面试就死在这个Alert上了.恼火. 根据网上各位大神的总结,我整理了一下,也顺便学习了一下. 一. ...

  2. 【jquery+easyUI】-- $.messager.show 弹框显示

    三种基本弹框 1.提示框,一秒停留 $.messager.show({ title: '提示', msg: '修改成功!', showType: 'fade', //设置显示类型 style: { l ...

  3. javascript的弹框

    学习js最先了解到的两种种简单测试手段就是alert("blah");和console.log("blah");了. 除了alert之外,js还有两种弹框 co ...

  4. weui 图片弹框

    添加图片与弹出效果对比: HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. odoo学习之弹框显示

    按条件隐藏: <xpath expr="//group[1]" position="attributes"> <attribute name= ...

  6. win10系统rational rose 安装后打开弹框显示java.lang.ClassNotFoundException 解决方案

    场景复现:安装Rational Rose,按照破解方法完成后,打开程序,会弹出对话框显示java.lang.ClassNotFoundException,在关闭程序时也会弹出一个对话框,并且程序不能关 ...

  7. 单击HighCharts柱形体弹框显示详细信息

    上篇博客介绍了如何在HighCharts统计图表下生成表格,二者相互结合,可以对数据进行更好的统计分析.在统计的同时,如果需要想要及时查看详细信息的话,就得再加一个功能,就是单击柱形体,显示该项下的详 ...

  8. vux弹框显示

    //点击按钮,执行什么成功,失败用这个合适this.$vux.toast.show({ text: '添加成功'}) //点击按钮,提示出现的问题 this.$vux.toast.show({ tex ...

  9. Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框

    <html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...

随机推荐

  1. shell脚本新建文件夹或用到目录时多出M或者?之类的

    新建问价加多出? 删除多显示M   建立软连接多\n等 可能是文件兼容问题, 1.首先用vi命令打开文件[root@localhost test]# vi test.sh   2.在vi命令模式中使用 ...

  2. win7 docker Toolbox 启动Docker Quickstart Terminal 失败!

    解决办法: 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败! 主要是用如下文件启动,临时解决,或设置环境变量

  3. Virtual Networking

    How the virtual networks used by guests work Networking using libvirt is generally fairly simple, an ...

  4. [转] IPTables for KVM Host

    IPTables for KVM Host January 26, 2012 By Andrew Galdes Use the following IPTables rules “/etc/sysco ...

  5. 深入理解JVM(一)——基本原理

    前言 JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则JVM则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解JVM必要的知识点. 运行流程 我们都 ...

  6. 【红色警报】XXE 高危漏洞将大面积影响微信支付安全,可能导致系统沦陷,请升级你的系统!

    今天,微信支付发布了一则紧急通知: 尊敬的微信支付商户: 您的系统在接受微信支付XML格式的商户回调通知(支付成功通知.退款成功通知.委托代扣签约/解约/扣款通知.车主解约通知)时,如未正确地进行安全 ...

  7. Hadoop 单表关联

    前面的实例都是在数据上进行一些简单的处理,为进一步的操作打基础.单表关联这个实例要求从给出的数据中寻找到所关心的数据,它是对原始数据所包含信息的挖掘.下面进入这个实例. 1.实例描述 实例中给出chi ...

  8. Idea环境下git 图形化操作

    大家好,之前我们介绍了<IDEA环境下GIT操作浅析之一Idea下仓库初始化与文件提交涉及到的基本命令>和<IDEA环境下GIT操作浅析之二-idea下分支操作相关命令>,本文 ...

  9. Android JNI 学习(四):接口方法表 & Base Api & Exception Api

    本文我们来总结一下JNI 提供的功能列表及相关的函数表. 注意:请注意使用术语“必须”来描述对JNI程序员的限制.例如,当您看到某个JNI函数必须接收非NULL对象时,您有责任确保不将NULL传递给该 ...

  10. mysql命令行创建表,插入表数据

    create table t_hero( id int unsigned auto_increment primary key, name varchar(10) unique not null, a ...