Twitter模式定位(Twitter modal positioning)

 所以我正在使用Grails的Twitter Bootstrap插件，我在模拟中心时遇到了麻烦。 当我从包含模态的div中删除class =“modal”部分时，我的居中功能正常工作，但是当我把它放回去时（这对于它具有模态的功能是必要的，它会被卡在页面的中间位置） ）。 任何帮助都会非常好：D这是我的代码： 
 
<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>

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 :D 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>

原文：https://stackoverflow.com/questions/11163236