时间戳

首页 > 解决方案 > Yii2 - 关闭模态时保持值输入

yii2 - Yii2 - 关闭模态时保持值输入

问题描述

在一个页面中，我用表单呈现另一个页面bootstrap modal，当填充输入时，如果关闭模式（不提交），只有单击（x）才能在再次打开模式时保持值输入？

索引，PHP

<?= Html::a('<button class="btn btn-info">+</button>',['app/create'], ['id' => 'btn-add']) ?>


<?php
Modal::begin([
    'header' => '<div id="modal-title"></div>',
    'id' => 'modal',
    'size' => 'modal-lg',
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => false],
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>

.js

$('body').on('click', '#btn-add', function(e) {
     e.preventDefault();
         $('#modal').modal('show').find('#modalContent').load($(this).attr('href'));
    });

标签： yii2bootstrap-modal

解决方案

您正在使用 jquery.load()方法在模态窗口内加载表单，无论您单击模态按钮上的关闭还是覆盖背景，当您+再次单击该按钮时，您都将在模态窗口内再次加载内容。

因此，如果您真的想这样做，则必须将表单移动到您拥有Modal代码的同一视图中，这意味着您必须内联添加表单并将按钮 javascript 更改为 just $('#modal').modal('show')。它应该如下所示

<?= Html::a('<button class="btn btn-info">+</button>','#', ['id' => 'btn-add']) ?>


<?php
Modal::begin([
    'header' => '<div id="modal-title"></div>',
    'id' => 'modal',
    'size' => 'modal-lg',
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => false],
]);?>

<div id='modalContent'>
<?php
//your active form starts here 
    $form = ActiveForm::begin(
        [
            'id' => 'your-form-id',
            'action' => Url::to(['/controller/action'])

        ]
    );
?>
<?php
       ActiveForm::end();
?>
</div>

<?php Modal::end();
?>

你的 Js 应该很简单

$('body').on('click', '#btn-add', function(e) {
    e.preventDefault();
    $('#modal').modal('show');
});

推荐阅读