Question

<div class="create-job-form">
    <?php
    Modal::begin([
        'header' => '<h4>Job Created</h4>',
        'id' => 'jobPop',
        'size' => 'modal-lg',
    ]);

    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>
    <table width="5">
        <?php $form = ActiveForm::begin(); ?>


        <fieldset>
            <legend>Order Details</legend>
            <td>
                <tr> <?= Html::activeHiddenInput($model, 'job_code', ['value' => rand(1, 10000)]) ?> </tr>
            </td>
            <td>
                <tr><?= $form->field($model, 'job_description')->textInput(['maxlength' => true]) ?></tr>
            </td>
            <td>
                <tr>
                    <?= $form->field($model, 'approved_date')->widget(
                        DatePicker::className(), [
                        // inline too, not bad
                        'inline' => true,
                        // modify template for custom rendering
                        'template' => '{input}',
                        'clientOptions' => [
                            'autoclose' => false,
                            'format' => 'dd-M-yyyy'
                        ]
                    ]); ?>

                </tr>
            </td>

            <td>
                <tr><?= $form->field($model, 'estimated_time')->dropDownList(['24hrs' => '24 Hours', '48hrs' => '48 Hours', '2-3d' => '2-3 Days', '3-4d' => '3-4 Days', '4-5d' => '4-5 Days', '5-6d' => '5-6 Days'], ['prompt' => 'Select Time']) ?></tr>
            </td>
        </fieldset>
    </table>
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary', 'id' => 'jobPop']) ?>
    </div>

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

</div>

<?php
$script = <<< JS
    $(function() {
        $('#jobPop').click(function () {
            $('#modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
        });
    });
JS;

    $this->registerJs($script);
    ?>

这是我的表单，我在单击“创建”按钮时尝试获取Modal，以便View将在Modal上。我做错了什么？我需要在表单上提交Modal应弹出并询问用户Job已创建您是否要将此信息发送给客户端如果用户单击是然后短信和电子邮件上面的详细信息应该发送给客户端如果用户说不，它应该返回到编辑模式并且应该刷新创建的作业代码

如何在Yii2中实现这一目标？

Answer 1

将模式ID从jobPop更改为modal。 e.g。

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

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

Answer 2

理想情况： 1.在你的布局文件中有模态。

 <?php
yii\bootstrap\Modal::begin([
    'headerOptions' => ['id' => 'modalHeader'],
    'id' => 'modal',
    'size' => 'modal-lg',
    'closeButton' => [
        'id'=>'close-button',
        'class'=>'close',
        'data-dismiss' =>'modal',
        ],
    //keeps from closing modal with esc key or by clicking out of the modal.
    // user must click cancel or X to close
    'clientOptions' => [
        'backdrop' => false, 'keyboard' => true
        ]
]);
echo "<div id='modalContent'><div style='text-align:center'>" . Html::img('@web/img/radio.gif')  . "</div></div>";
yii\bootstrap\Modal::end();
?>

添加一个js文件 - 用js代码加载模态 -

$(function(){
  $(document).on('click', '.showModalButton', function(){

    if ($('#modal').hasClass('in')) {
        $('#modal').find('#modalContent')
                .load($(this).attr('value'));
        document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
    } else {
        $('#modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
        document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
    }
});

}）;

在您的应用程序中包含js文件。 assets / AppAsset.php：

public $ js = ['js / ajax-modal-popup.js'];

将css类：'showModalButton'添加到模态中内容的所有按钮。

...

'class'=>'btn showModalButton',

...

如果请求是通过ajax完成的，修改控制器操作以通过ajax呈现内容：

if(Yii::$app->request->isAjax){
        return $this->renderAjax('your-view-file', [
            'model' => $model,
        ]);

Answer 3

Bootsrap 4：https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap4/doc/api/2.0/yii-bootstrap4-modal

Modal::begin([
    'title' => 'Hello world',
    'toggleButton' => ['label' => 'click me'],
]);

echo 'Say hello...';

Modal::end();

如何在Yii2中添加Bootstrap Modal？

3 个答案: