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

Question

I am using bootstrap modal to create a thumbnail gallery that displays an attempt of full-size images when its thumbnail is clicked.

I managed to make everything work fine and changed the css a bit but I don't find the way to make the closing "x" button be displayed inside the image, preferably in the top right side of it.

Here's my 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>

The script that makes the whole thing work:

<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>

What should I do to achieve my goal? I am using Bootstrap 3.

Answer 1

Hello, dabadaba!

WORKING FIDDLE : http://jsfiddle.net/Ed2Q7/2/

You'll want to make sure the modal has position:relative; and that your image and button have position:absolute; .

So here's an example:

.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 */
}

Foot note: If your image is just a background image inside a div, just set the div to position: relative; and place the close button inside with the same position: absolute; top:0; right:0; position: absolute; top:0; right:0; style.