如何在 Yii2 中实现模态答案

【问题标题】：How can I implement modal in Yii2如何在 Yii2 中实现模态
【发布时间】：2017-02-15 05:55:49
【问题描述】：

我的项目中有两个名为 schedule_route,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>

【问题讨论】：

Tried anything?
显示schedule_route 表格。
是的，我更新了问题
你需要添加按钮来显示模态和js来加载模态。查看第一个评论链接。

标签： yii2 yii2-advanced-app

【解决方案1】：

可以实现 yii2 内置 bootstrap Modal

use yii\bootstrap\Modal;

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

// 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');});

【讨论】：

【解决方案2】：

在控制器中，您必须使用 renderAjax 方法加载视图。此方法加载没有布局的视图。

我学习了如何做这个视频，这是极力推荐的

How to load a view within a modal

【讨论】：