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: https://i.stack.imgur.com/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.

I guess there's `overflow: hidden;` somewhere in the CSS aplied to the modal, which hides any overflows. If you can use a different modal use http://fancyapps.com/fancybox/ — aNewStart847, Apr 12 '13 at 17:39

score 2 · Accepted Answer · answered Apr 13 '13 at 01:09

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/

score 0 · Answer 2 · answered Apr 12 '13 at 17:48

0

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.

answered Apr 12 '13 at 17:48

Fernker

2,238
20
31

score 0 · Answer 3 · answered Jun 27 '17 at 15:59

0

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

answered Jun 27 '17 at 15:59

trees_are_great

3,881
3
31
62

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

3 Answers3