Question

我尝试通过模态boostrap加载ActiveForm 而是形成模态加载整页在图片中 example

布局：main.php

...
    yii\bootstrap\Modal::begin([
        'header' => '<span id="modalHeaderTitle"></span>',
        'headerOptions' => ['id' => 'modalHeader'],
        'id' => 'modal',
        'size' => 'modal-lg',
        'closeButton' =>['tag'=>'close', 'label'=> 'Zamknij'],
        'clientOptions' => ['backdrop' => 1, 'keyboard' =>True]
    ]);
    echo "<div id='modalContent'></div>";
    yii\bootstrap\Modal::end();
    ?>
 ...

查看：_form.php

<div class="category-form">
Lorem Ipsum
</div>

启动模式按钮：

<?= Html::button('Nowa kategoria', ['value' => Url::to(['category/create']), 'title' => 'Nowa kategoria', 'class' => 'showModalButton btn btn-success']); ?>

modal.js

$(function(){
      $(document).on('click', '.showModalButton', function(){
        if ($('#modal').data('bs.modal').isShown) {
            $('#modal').find('#modalContent')
                    .load($(this).attr('value'));
            document.getElementById('modalHeaderTitle').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        } else {

            $('#modal').modal('show')
                    .find('#modalContent')
                    .load($(this).attr('value'));

            document.getElementById('modalHeaderTitle').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        }
    });
});

请帮助查找错误。

Answer 1

您必须告诉控制器中的操作，使页面不使用整页布局。你应该可以通过设置来做到这一点。

$this->layout = false;

在控制器中，它不使用任何布局。或者您可以设置特定的布局：

$this->layout = 'modalLayout.php';

在modalLayout.php文件夹中创建一个名为layouts的文件，该文件只包含您想要作为模式布局的内容。

在获得包含所需内容的模态后，在此处添加一个新问题，并询问为什么ActiveForm无法正常工作（P.S。：因为它可能无法正确实例化）。

Yii2整页加载到模态div

1 个答案: