Question

我正在使用bootstrap模式创建一个缩略图库，在单击缩略图时显示全尺寸图像的尝试。

我设法使一切正常并改变了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

你好，dabadaba！

工作时间：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;样式

如何在图像中放置关闭图标：bootstrap 3模态

1 个答案: