添加图片与弹出效果对比：

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

        <!--医首信息自定义css-->

        <link rel="stylesheet" type="text/css" href="../css/jiaj.css" />

        <!--官网demo css-->

        <link rel="stylesheet" type="text/css" href="../css/example.css" />

        <!--weui css-->

        <link rel="stylesheet" type="text/css" href="../css/weui.css" />

        <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />

        <!--jQuery weui-->

        <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">

        <title>回答问题</title>

    </head>

<body ontouchstart>

        <!--页面切换必须要添加js_container-->

        <div class="container js_container">

            <!--图片放大容器 style的透明度一定是0.8-->

            <div class="weui-gallery" id="gallery" style="opacity: 0.8; display: none;">

                <span class="weui-gallery__img" id="galleryImg" style="background-image:url(../img/doctor/55.jpg)"></span>

                <div class="weui-gallery__opr">

                    <a href="javascript:" class="weui-gallery__del">

                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>

                    </a>

                </div>

            </div>

            <div class="page">

                <!--问题图片-->

                <div class="weui-cells__title">上传3张图片，让患者更加容易理解</div>

                <div class="weui-jiaj-panel">

                    <!--上传图片-->

                    <div class="weui-cell">

                        <div class="weui-cell__bd">

                            <div class="weui-uploader">

                                <div class="weui-uploader__bd">

                                    <ul class="weui-uploader__files" id="uploaderFiles"></ul>

                                    <div class="weui-uploader__input-box">

                                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!--button-->

                <div class="weui-jiaj-bd">

                    <div class="weui-jiaj-btn-tixian">

                        <div id="d_answer" class="weui-btn weui-btn_primary">回答</div>

                    </div>

                </div>

            </div>

        </div>

        <!--页面切换-->

        <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>

        <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

        <script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>

    </body>

</html>

JS:

$(function() {

    var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',

        $gallery = $("#gallery"),

        $galleryImg = $("#galleryImg"),

        $uploaderInput = $("#uploaderInput"),

        $uploaderFiles = $("#uploaderFiles");

    $uploaderInput.on("change", function(e) {

        var src, url = window.URL || window.webkitURL || window.mozURL,

            files = e.target.files;

        for(var i = 0, len = files.length; i < len; ++i) {

            var file = files[i];

            if(url) {

                src = url.createObjectURL(file);

            } else {

                src = e.target.result;

            }

            $uploaderFiles.append($(tmpl.replace('#url#', src)));

        }

    });

    $uploaderFiles.on("click", "li", function() {

        $galleryImg.attr("style", this.getAttribute("style"));

        $gallery.fadeIn(100);

    });

    $gallery.on("click", function() {

        $gallery.fadeOut(100);

    });

});

weui 图片弹框的更多相关文章

  1. JavaScript 图片弹框显示

    function fnCreate(src) {             /* 要创建的div的classname */             var ClassName = "thumb ...

  2. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  3. WebView 中图片长按出现弹框，点击存储图像闪退的解决方案

    在使用 WKWebView 展示 H5 时,如果 H5 中有图片,长按图片会出现弹框,在 iOS11 系统中,存储图像,如果未开启相册权限,会直接 Crash 掉: 解决方案一(原生解决): 在代理方 ...

  4. weui 弹框中的单选效果

    <!--性别修改弹框--> <div class="weui_dialog_alert" id="doctorSexDialog" style ...

  5. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  6. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  7. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  8. Unity调用Windows弹框、提示框(确认与否，中文)

    Unity调用Windows弹提示框 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  9. layer插件学习——弹框（自定义页）

    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...

随机推荐

  1. ASP.NET MVC——Razor视图引擎

    Razor是MVC框架视图引擎,我们今天就来说一说Razor视图引擎. 首先还是来创建一个基础项目叫Razor来演示. 先来定义一个Model叫Product public class Product ...

  2. 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    [源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...

  3. Console.In.ReadToEnd() 控制台 输入完毕

    输入完数据后 按回车(另起一行) ctrl+z enter .......百度了半天 没百度到..最后还是google 强大..解决了问题 ..

  4. Android面试题（一）

    1. 请描述一下Activity 生命周期. 答: 如下图所示.共有七个周期函数,按顺序分别是: onCreate(), onStart(), onRestart(), onResume(), onP ...

  5. Android中使用GridView和ImageViewSwitcher实现电子相册简单功能

    我们在手机上查看相册时,首先看到的是网格状的图片展示界面,然后我们选择想要欣赏的照片点击进入,这样就可以全屏观看该照片,并且可以通过左右滑动来切换照片.如下图的显示效果: 首先我们先罗列一下本次实现所 ...

  6. 图解ios程序生命周期

    图解ios程序生命周期 应用程序启动后状态有Active.Inactive.Background.Suspended.Not running这5种状态,几种状态的转换见下图: 在AppDelegate ...

  7. Android开发案例 - 自定义虚拟键盘

    所有包含IM功能的App(如微信, 微博, QQ, 支付宝等)都提供了Emoji表情之类的虚拟键盘,  如下图:    本文只着重介绍如何实现输入法键盘和自定义虚拟键盘的流畅切换, 而不介绍如何实现虚 ...

  8. 让你少走弯路的搭建树莓派的Net与NodeJS运行环境

      树莓派是当前最火的嵌入计算平台没有之一,树莓派可以给我们无数的想象,树莓派的高性能.低功耗.低成本.可扩展性(最新的树莓派原生支持WIFI和蓝牙,这功能太赞了)深受大家的喜爱.虽然树莓派到目前为止 ...

  9. Java实现压缩与解压缩

    import java.io.*; import java.util.*; import java.util.zip.ZipOutputStream; import java.util.zip.Zip ...

  10. Windows批处理：请求远程协助

    公司办公场地分别在两个不同的楼层,处理问题要来回跑,所以思考使用远程访问的方式解决问题.同事大多对电脑不熟悉,使用「通讯软件」和「电话」教同事开启远程桌面沟通成本挺高,另外公司IP地址.账号密码都没统 ...