[SOLVED] Bootstrap Modal with button(img) that hangs over the edge

Bootstrap Modal with button(img) that hangs over the edge

I'm trying to have a close button "hang" off the corner of my modal, something like this: https://i.sstatic.net/YEkZk.png

I've tried giving the corner image display:inline;float:right; and some relative positioning, but nothing gets displayed outside of the Modal's internal area ( and sometimes the Modal gains a scrollbar to show the image when scrolled). I tried increasing the z-index too, to no avail.

Is there any way to do this? Perhaps a background image for the Modal itself? Alternative Modals? I'm using GWT with gwt-bootstrap, so hopefully there is some css-only solution.

Solution

Here is HTML markup for modal header

<div class="modal-header">
    <button type="button" class="close mynewclassclose" data-dismiss="modal" aria-hidden="true">
       <img src="http://expediaholiday.d.seven2.net/_images/modal_close.png"/>
    </button>
    <h3 id="myModalLabel">Modal Heading</h3>    
</div>/

I've added some new class .mynewclassclose, just to override default Twitter Bootstrap settings for this button. And I've added image for closing button. (you can use background image instead this, doesn't matter. But in that case you must define width and height in CSS).

Here is CSS

.modal-header {
    position: relative;
}

.mynewclassclose {
    position: absolute;
    margin: 0;
    top: -23px; /* half height of "X" image, just for nice placing*/
    right: -23px; /* half width of "X" image, just for nice placing*/
    opacity: 0.9;
}

.mynewclassclose:hover {
    opacity: 1;
}

And here is working demo: http://jsfiddle.net/Aqydb/1/