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 ヘッダー、および .modal クラスと同様です。

そして、あなたの質問に答えるために、あなたの質問が正しければ、モーダルを垂直に配置しようとしていたということです。

bootstrap.css を開き、 .modal.fade.in を見つけて編集します

デフォルト値は 50% です。希望の位置に到達するまで、それで遊んでみてください。モーダルを下に移動するにはそれを増やし、減らすとその逆になります。

于 2012-08-16T04:31:41.247 に答える
0

デフォルトのモーダル サイズ モーダル ウィンドウの位置 画面の水平方向の中央は、モーダルがカスタマイズ (幅が変更) されると、スクリプトで配置する必要があります。

サンプル スクリプト:

$('#myModal').modal({ 背景: true, キーボード: true }).css({ width: '800',// カスタム幅 'margin-left': function () { return -($(this .width() / 2); } });

于 2013-09-13T12:03:06.927 に答える