Yii2 将视图渲染为模态，弹出 Window 表单

Question

将视图页面呈现为预览模式：

<h1><?= Html::encode($this->title) ?></h1>

<p>
    <?= Html::button('Create Branches', ['value'=>Url::to(['/branches/create']),'class' => 'btn btn-success','id'=> 'modalButton']) ?>
</p>

<?php
    Modal::begin([
        'header'=>'<h4>Branches</h4>',
        'id'=>'modal',
        'size'=>'modal-lg',
    ]);

    echo "<div id='modalContent'></div>";
    Modal::end();
?>

我的控制器：

public function actionCreate()
{
    return $this->renderAjax('create', [
                'model' => $model,
            ]);
}

我的脚本：

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

但是当我单击 link 时，它会打开一个没有 CSS 的视图页面，而不是弹出模式。请帮我解决一下这个。谢谢

Answer 1

您可以像这样更新您的代码。

<h1><?= Html::encode($this->title) ?></h1>

<p>
<!-- updated id to class here -->
  <a class="modalButton btn btn-success" href="<?=Url::to(['/branches/create']) ?>">
</p>

<?php
    Modal::begin([
        'header'=>'<h4>Branches</h4>',
        'id'=>'modal',
        'size'=>'modal-lg',
    ]);

    echo "<div id='modalContent'></div>";
    Modal::end();
?>

更新 Jquery 事件。

$(function(){
    // changed id to class
    $('.modalButton').on('click', function (){
        $.get($(this).attr('href'), function(data) {
          $('#modal').modal('show').find('#modalContent').html(data)
       });
       return false;
    });
});