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. AngularJS 关于ng-model和ng-bind还有{{}}

    What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --> v ...

  2. spring boot 入门及示例

    需要环境:eclipse4.7.3 + jdk1.8 +maven3.6.1 + tomcat(web需要) spring boot官网介绍:https://spring.io/guides/gs/s ...

  3. Akka-CQRS(2)- 安装部署cassandra cluster,ubuntu-16.04.1-LTS and MacOS mojave

    对于akka-cluster这样的分布式软件系统来说,选择配套的数据库类型也是比较讲究的,最好也是分布式的,如cassandra,能保证良好的HA特性.前面的例子里示范akka-persistence ...

  4. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  5. Elastic Search 上市了,市值翻倍,这群人财务自由了!

    国庆长假,大部分人还深浸在风花雪月之中,而就在昨天(美国时间10月5号),我们 Java 程序员所熟知的大名鼎鼎的 Elastic Search 居然在美国纽约证券交易所上市了! 当说到搜索时,大部分 ...

  6. nginx、swoole高并发原理初探

    阅前热身 为了更加形象的说明同步异步.阻塞非阻塞,我们以小明去买奶茶为例. 同步与异步 同步与异步的重点在消息通知的方式上,也就是调用结果通知的方式. 同步:当一个同步调用发出去后,调用者要一直等待调 ...

  7. 2.matplotlib画散点图

    2.1.身高和体重实例 import matplotlib.pyplot as plt height = [161,162,163,164,165] weight = [50,60,70,80,90] ...

  8. 新装mysql数据库登陆不上去(账号密码正确)

    Open & Edit /etc/my.cnf Add skip-grant-tables under [mysqld] Restart Mysql You should be able to ...

  9. JavaScript高级编程(1)——JavaScript初识

    一.javascript的简介 1.1 javascript的历史回顾. Javascript诞生于1995年.当时,它主要的目的是用来处理一些由服务器端处理的输入验证操作.在javascript没有 ...

  10. Gradle nexus配置

    1.下载Gradle; 2.添加脚本init.gradle到gradle的init.d目录中: ext { nexus = 'http://192.168.184.6:8081/nexus' user ...