Question

我的项目中有两个名为 schedule_route，bus_stop 的表单。我想在点击时将 bus_stop 表单显示为弹出窗口按钮位于 schedule_route 表单中。 bus_stop表单使用Stops控制器上的 actionCreate 进行渲染。如何使用Modal实现此功能在yii2？

schedule_route表单是：

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\depdrop\DepDrop;
use yii\helpers\ArrayHelper;
use common\models\Stops;
use kartik\time\TimePicker;
use common\models\Schedules;
use yii\bootstrap\Modal;
use yii\helpers\Url;


/* @var $this yii\web\View */
/* @var $model app\models\ScheduleRoute */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="schedule-route-form">
   <div class="row">
<div class="col-lg-5">



    <?php $form = ActiveForm::begin(); ?>


    <?php echo $form->field($model, 'schedule_id')->dropDownList(ArrayHelper::map(Schedules::find()->all(), 'id', 'route_name'), ['prompt' => 'Choose...']); ?>
     <?php echo $form->field($model, 'stop_id')->dropDownList(ArrayHelper::map(Stops::find()->all(), 'id', 'stop'), ['prompt' => 'Choose...']); ?>
    <?php 
Modal::begin([
    'header' => '<h2>Schedule Route</h2>',
    'id'=>'modal',
    'toggleButton' => ['label' => 'Add '],

]);
Modal::end();?>
<div class="modal remote fade" id="modalvote">
        <div class="modal-dialog">
            <div class="modal-content loader-lg"></div>
        </div>
</div>

    <?php echo $form->field($model, 'depart')->widget(TimePicker::classname(), []);?>

    <?= $form->field($model, 'route_order')->textInput() ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

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


</div>
</div>

</div>

Answer 1

在控制器中，您必须使用renderAjax方法加载视图。此方法加载视图而不进行布局。

我学习了如何按照这个视频推荐的方式来做这件事

How to load a view within a modal

Answer 2

您可以实现内置于引导Modal的yii2

use yii\bootstrap\Modal;

Modal::begin([
    'header' => 'Header title',
    'id' => 'mymodal',
    //'options' => ['class' => 'modal'] //in case if you dont want animation
]);

// your form here

Modal::end();

然后将data-toggle='modal'和data-target='#modalId'属性添加到您希望模式打开的单击元素上，例如：

<button data-toggle='modal' data-target='#mymodal'>Click me</button>

或者您可以使用jQuery触发

$('button').click(function(){$('#mymodal').modal('show');});

如何在Yii2中实现模态

2 个答案: