如何在图像中放置关闭图标：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; position: absolute; top:0; right:0; 样式。