如何在图像内放置关闭图标：bootstrap 3 modal

Question

我正在使用引导模式创建一个缩略图库，当点击它的缩略图时，它会显示全尺寸图像的尝试。

我设法使一切正常并稍微更改了 css，但我找不到使关闭“x”按钮显示在内部图像的方法，最好是在右上角一边。

这是我的 HTML：

<div id="galeria" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-body"></div>
      </div>
    </div>
  </div>
</div>

使整个事情起作用的脚本：

<script type='text/javascript'>
$(document).ready(function() {
  $('.thumbnail').click(function(){
    $('.modal-body').empty();
    $("<button type='button' class='close' style='font-size:30px' data-dismiss='modal'>×</button>").appendTo('.modal-body');
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#galeria').modal({show:true});
  });
});
</script>

我应该怎么做才能实现我的目标？我正在使用 Bootstrap 3。

Answer 1

你好，达巴达巴！

工作小提琴：http://jsfiddle.net/Ed2Q7/2/

您需要确保模态框具有position:relative;，并且您的图像和按钮具有position:absolute;。

下面是一个例子：

.modal {
    position: relative;
}
.modal img { /* select the image tag inside the modal. */
    position: absolute;
    top:0;
    left:0;
    z-index:50; /* for good measure */
}
.modal .close { /* select the close button */
    position: absolute;
    top:0;
    right:0;
    z-index:51; /* place it over the img */
}

脚注：如果您的图片只是 div 内的背景图片，只需将 div 设置为 position: relative; 并将关闭按钮放置在内部，并使用相同的 position: absolute; top:0; right:0; 样式。