javascript - How to place close icon inside the image: bootstrap 3 modal - Stack Overflow

admin管理员组

文章数量:1427984

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.

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Jan 14, 2014 at 19:31 dabadabadabadaba 9,5422121 gold badges9595 silver badges170170 bronze badges 3

• 1 What CSS have you tried? Provide a JSFiddle if possible – Shai Commented Jan 14, 2014 at 19:34
• Bootstrap modal css, I didnt' change it. Well, I did, but it doesn't interfere with with what I am asking. – dabadaba Commented Jan 14, 2014 at 19:40
• you may want to try using negative margins in your CSS file. Either that or do not specify the close as 'x' but instead use a div or span with associate background image. You will then have much more control over size, position and display. – Philip Bevan Commented Jan 14, 2014 at 20:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Hello, dabadaba!

WORKING FIDDLE: http://jsfiddle/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; style.

本文标签： javascriptHow to place close icon inside the image bootstrap 3 modalStack Overflow