Question

我有以下代码，用于在叠加div中打开图像。出于某种原因，每当我尝试向图像对象添加边框时，它都不起作用。它只出现没有边框的原始图像。如何在此处实现边框以及右上角的关闭按钮？这是我的代码。

$(document).ready(function(){
    $('a.lightbox').click(function(e){

        $('body').css('overflow-y',' hidden');

        $('<div id="overlay"></div>')
        .css('top', $(document).scrollTop())
        .css('opacity', '0')
        .animate({'opacity': '0.6'}, 'slow')
        .appendTo('body');

        $('<div id= "lightbox"></div>')
        .hide()
        .appendTo('body');

        $('<img>', {
            src: $(this).attr('href'),
            load: function() {
                positionLightboxImage();
            },
            click : function() {
                removeLightbox();
            }
        }).appendTo('#lightbox');
        return false;
    });
});

function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
}

function removeLightbox() {
  $('#overlay, #lightbox')
    .fadeOut('slow', function() {
      $(this).remove();
      $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
}


<a class="lightbox" href="<?php echo $row_searchHH['imageURL']; ?>"><img src="<?php echo $row_searchHH['imageURL']; ?>" width="90" height="90" style="margin-left:10px" /></a>

Answer 1

将边框添加到此块：

  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })

例如：

  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left,
      'border': '2px solid white'
    })

Answer 2

检查this fiddle以获取演示如果img内有div 那么可能你可以设置图像的样式

CSS

.imageclass{
width:98%;
height:98%;
    position:absolute;
    left:1%;
    top:1%;
}
.parentdivclass{
background:rgba(15, 15, 15, .5);
    width:200px;
    height:200px;
    position:absolute;
}
.closebuttonclass
{
left:95%;
top:0.2%;
    width:5%;
    height:5%;
    position:absolute;
}

您可以将关闭按钮图像放在div的右上角！

所以最终的div结构应该是这样的

HTML

<div class='parentdivclass'>
<img class='imageclass' src='' />
<img class='closebuttonclass' src='' />
</div>

在叠加和关闭按钮或链接中为图像添加边框

2 个答案: