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

Question

I'm trying to have a close button "hang" off the corner of my modal, something like this: http://i.imgur.com/3rminEM.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.

Answer 1

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/

Answer 2

You said you've tried inline and relative positioning. Have you tried absolutely positioning it? top: 0; right: 0; If you have tried that do you mind posting some of the code or a working example, it will help you get and answer quicker.

Answer 3

The following line of css will do the trick:

.modal-body { overflow-y: visible !important; }

Optionally, you may want a min-height:

.modal-body { min-height: 350px; overflow-y: visible !important; }