Question

so I’m using the Twitter Bootstrap plugin for Grails and I’m having trouble centering modals. When I remove the class=”modal” part from the div that contains the modal, my centering function works properly, but when I put it back (which is necessary for it to have the functionality of a modal it gets stuck halfway off the page). Any help would be very nice 😀
Here’s my code:

<a style="position: relative; top: 2px;" data-toggle="modal" href="#myModal${instanceType.id}"
         id="${instanceType.id}"> ${message} </a>
<div class="modal" style="background: black; overflow: hidden; top: 0px; left: 0px; display: none; border: 2px solid white; float: center; position: absolute"
        id="myModal${instanceType.id}">
                <div style="border:none" class="modal-header">

                <a style="color:white;" class="close" data-dismiss="modal">X</a>
        </div>
        <iframe id="iFrame" style="border: none;"width=800px height=675px src="${action}/${instanceType.id}">

        </iframe>
        <div class="modal-body" style="background: black;"></div>
        <div style="border:none; background: black;" class="modal-footer">
                <a "="#" class="btn" data-dismiss="modal">Close</a>
        </div>

</div>
<script>
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
$(myModal${instanceType.id}).css({
    'width' : $(window).width()*.75,
    'height' : $(window).height()*.75
    })
$(myModal${instanceType.id}).center()

$('#modal-footer').append('<a href="#" class="btn btn-primary" data-dismiss="modal" onclick="submitFunction()">${saveName}</a>')
function submitFunction(){
        $("iFrame").contents().find("#submit").click()
}
function changePre(){
        $("iFrame").contents().find(".buttonNew").submit()
        alert('hi')
}
</script>

Answer 1

If you’re using the default modal styling centers the modal by absolute positioning. So when you customize a modal windows, and you change the size of it, you shall adjust relevant elements also. Like the modal-body and modal header and the .modal class.

And to answer your question, and if I got your question right, that is you were trying to position your modal VERTICALLY.

Open bootstrap.css , then find and edit .modal.fade.in

The default value is 50%. Try to play with it until you achieve your desired position. Increase it to move the modal to the bottom, decrease it and it will do the opposite.