Question

所以我正在使用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>

Answer 1

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

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

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

默认值为50％。尝试使用它直到达到理想的位置。增加它以将模态移动到底部，减少它，它将执行相反的操作。

Answer 2

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

示例脚本：

$（ '＃myModal'）。模态（{ 背景：是的，键盘：是的 }）。CSS（{ width：'800'，//自定义宽度 'margin-left'：function（）{ return - （$（this）.width（）/ 2）; } }）;

Twitter模式定位

2 个答案: