如何在圖像中放置關閉圖標：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; 樣式。