Question

我一直在某种形式上使用bootstrap模态。我从this教程中学到了创建模态。对于我之前的项目，我对模态没有任何问题。但对于我目前的项目，模态体并没有完全覆盖模态内容。这是截图我现在通过引用this解决了这个问题。我无法弄清楚可能导致高度问题的原因。

我的观看文件代码

<div class="collection-type-index">



<h1><?= Html::encode($this->title) ?></h1>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<p>
    <?= Html::button('Create Collection', ['value' => Url::to('index.php?r=settings/collectiontype/create'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>
</p>

        <?php // Modal for create
            Modal::begin([
                    'header'=>'Collection Type',
                    'id'=>'modal',
                    'size'=>'modal-lg',
            ]);

            echo "<div id='modalContent'></div>";

            Modal::end();

    ?> <!-- end modal -->

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'id',
        'type',
        'days',
        'created_by',
        'modified_by',
        // 'status',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

我的控制器创建操作代码

public function actionCreate() {
        $model = new CollectionType();

        $model->created_by = Yii::$app->user->identity->username;
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        } else {
            if (Yii::$app->request->isAjax) {
                return $this->renderAjax('create', ['model' => $model]);
            } else {
                return $this->render('create', ['model' => $model]);
            }
        }
}

我的js代码

$(function(){
$('#modalButton').click(function(){
    $('#modal').modal('show')
        .find('#modalContent')
        .load($(this).attr('value'));
});

$('#modal').on('show.bs.modal', function () {
    $('.modal-lg .modal-content').css('height',$( window ).height()*0.55);
});
});

正如我所说，我已经通过使用上面的js脚本解决了这个问题，但我不认为这是最好的解决方案，因为我必须为每个模态手动设置高度。什么可能导致这个问题？有没有人遇到这个问题并解决？

Answer 1

这看起来像浮动的问题。修改模态内生成的视图：

在<div class="clearfix">和</div>之间包含此模态的内容。

OR

在此视图的末尾添加<div class="clearfix"></div>。

Yii2模态高度问题

1 个答案: