1

所以我正在为 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>
4

2 回答 2

4

如果您使用默认模态样式，则模态将通过绝对定位居中。因此，当您自定义模态窗口并更改其大小时，您也应调整相关元素。就像 modal-body 和 modal header 以及 .modal 类。

并回答你的问题，如果我的问题是正确的，那就是你试图垂直定位你的模态。

打开 bootstrap.css ，然后找到并编辑 .modal.fade.in

默认值为 50%。试着玩它，直到你达到你想要的位置。增加它以将模态移动到底部，减少它，它会做相反的事情。

于 2012-08-16T04:31:41.247 回答
0

默认模态大小模态窗口位置屏幕的水平中心，一旦模态自定义（宽度改变），需要用脚本定位它。

示例脚本：

$('#myModal').modal({ background: true, keyboard: true }).css({ width: '800',// 自定义宽度 'margin-left': function () { return -($(this ).width() / 2); } });

于 2013-09-13T12:03:06.927 回答