zoukankan      html  css  js  c++  java
  • layer 弹窗显示图片

     上代码

    Html

    <!-- 显示的图片,点击弹出点击的图片-->
    <
    img src="~/Content/images/image.png" onclick="onTan(this)" />
    <!-- 由于弹出当前图片内容,在关闭弹框时会导致原图片被隐藏掉,所以这里用一个备用图片来替代弹出-->
    <img src="" id="copyimg" style="display:none;100%" />

    Js

    function onTan(item) {
            var img = $(item);        
            var imgurl = img.attr("src");
            $("#copyimg").attr("src", imgurl);
            setTimeout(function () {//做个延迟是因为layer 触发过快            
                layer.open({
                    type: 1,//Page层类型  为1显示本地类容   为2显示在线内容,也就是图片链接
                    title: false,
                    closeBtn: 1, //0不显示关闭按钮 1显示
                    shadeClose: true, //开启遮罩关闭
                    area: ["90%", $("#copyimg").height],//弹框的宽高
                    content: $("#copyimg")  //内容
                });
            },100);        
        }
  • 相关阅读:
    jquery
    gulp 入门
    bower 教程
    webstrom管理git
    修改页面浏览器自动刷新
    兼容IE低版本
    js之触屏事件篇
    js之日期篇
    设置浏览器默认样式
    Listview四种视图VIEW
  • 原文地址:https://www.cnblogs.com/dyd520/p/15466485.html
Copyright © 2011-2022 走看看