jq点击小图弹出大图（更新版）

最新推荐文章于 2018-10-11 11:08:45 发布

weixin_30328063

最新推荐文章于 2018-10-11 11:08:45 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/dongxiaolei/p/6224907.html

版权

$(function(){
    $(".fj1-consult").on("click",function(){
        //设置弹框中图片的路径
        $(".layer_con img").attr("src","images/dx03.png");
        layer($(this));
    });
    function layer(small){
        $(".layer_con img").on("load",function(){
            var $con=$(".layer_con").height()+30;
            $(".layer_bg").css({"display":"block"});
            var $winH=$(window).height();
            if($con > $winH){
                $(".layer_con").css({"height":$winH,"display":"block","top":"0","margin-top":"0"});
            }else{
                $(".layer_con").css({"display":"block","top":"50%","margin-top":-$con/2});
            }
        })
    }
    $(".close").on("click",function(){
        $(this).parents(".layer_con").css("display","none");
        $(".layer_bg").css("display","none");
    });
})

<div class="layer_bg card-layerBg"></div>
<div class="layer_con card-layerCon">
    <div class="layer_main card-layerM">
        <img  src=""/>
    </div>
    <div class="close">x</div>
</div>

View Code

.card-layerBg {
    display: none;
    width: 100%;
    z-index: 999;
    position: fixed;
    background-color: #000;
    opacity: 0.5;
    top: 0;
    height: 100%;
    filter: alpha(opacity=50);
}

.card-layerCon {
    display: none;
    width: 600px;
    padding: 10px 30px 20px 0;
    background-color: #fff;
    z-index: 9999;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    opacity: 1;
    filter: alpha(opacity=100);
    text-align:center;
}

.close {
    font-size: 33px;
    text-align: center;
    color: #ab2223;
    position: absolute;
    right: 10px;
    top: -8px;
    cursor: pointer;
}

.card-layerM {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    padding-top: 25px;
    overflow-y: auto;
    max-height:100%;
    text-align: center;

}
.card-layerM img{
    width:auto;
    max-width:100%;
    max-height:100%;
}