1、html

<div id="page-content">
    {$article.content}
</div>


<div class="theme-popover-mask" id="photo-mask"></div>
<div class="photo-popover">
    <img src="close-photo.png" class="close-photo-button">
    <img id="photo-popover" src="" >
</div>

2、css

.photo-popover {
    display:none;
    z-index: 9999;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.close-photo-button{
    position: absolute;
    top: -20px;
    right: -20px;
}

3、jquery

$('#page-content img').on('click',function(){
    var src = $(this).attr('src');
    $('#photo-mask').css('display','block');
    $('#photo-popover').attr('src',src);
    $('.photo-popover').css('display','block');
})

$('#photo-popover').on('click',function(){
    $('#photo-mask').css('display','none');
    $('.photo-popover').css('display','none');
})

$('.close-photo-button').on('click',function(){
    $('#photo-mask').css('display','none');
    $('.photo-popover').css('display','none');
})

来自ansion博客 

http://www.tp0.top

2017-09-06 20:34:33