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. all about

    1.三次握手和四次挥手?2.什么是OSI七层结构?3.http vs https?4.what is Ping?基于什么协议?使用方法?5.DNS?6.cookie vs session?7.LDAP ...

  2. nova compute enable password injection and filesystem resize

    root@OpenstackIcehouse2:~# cat /etc/nova/nova-compute.conf [DEFAULT] compute_driver=libvirt.LibvirtD ...

  3. 【腾讯Bugly干货分享】Android内存优化总结&实践

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/2MsEAR9pQfMr1Sfs7cPdWQ 导语 智 ...

  4. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  5. JVM垃圾收集器与内存分配策略(一)

    在前面的Java自动内存管理机制(上)和Java自动内存管理机制(下)中介绍了关于JVM的一些基础知识,包括运行时数据区域划分和一些简单的参数配置,而其中也谈到了GC,但是没有深入了解,所以这里开始简 ...

  6. python多线程在渗透测试中的应用

    难易程度:★★★ 阅读点:python;web安全; 文章作者:xiaoye 文章来源:i春秋 关键字:网络渗透技术 前言 python是门简单易学的语言,强大的第三方库让我们在编程中事半功倍,今天, ...

  7. 9.视差特效、回弹动画、overScrollBy

    视差特效 * 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹* 功能实现: > 1. 重写overScrollBy > 2. 松手之后执行动画, 类型估值器 .  ...

  8. SpringMVC框架二:SpringMVC与MyBatis整合

    下面整合SpringMVC和MyBatis框架,并做一个小案例 创建数据库springmvc,并创建两张表,加入一些数据: 两张表:商品表,用户表 CREATE DATABASE springmvc; ...

  9. 用excel记录测试bug问题总结

    前几天与开发在讨论问题的时候,开发提了一个问题,说是已经解决的问题,能否用excel表格总结一下,问了一下原因,感觉想法很好,就总结了一下. 在上家公司的时候,提交bug用的是mantis,现在是禅道 ...

  10. IT老人,给后辈的十一点建议

    我已经在IT业打拼9年了,从完全自学成为技术团队leader到PM也确实总结了不少的经验,自己也经常跟学弟学妹聊天,分享职场经验,当老家有人报考计算机或者从事相关工作时也会咨询我的意见,我很明白IT人 ...