如何在Yii2中添加Bootstrap Modal？

Posted 2021-04-16

<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中实现这一目标？

答案

将模态ID从jobPop更改为modal。例如

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

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

另一答案

理想情况：1。在布局文件中使用模态。

 <?php
yiiootstrapModal::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>";
yiiootstrapModal::end();
?>

2. 添加有一个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'];
3. 将css类：'showModalButton'添加到模态中内容的所有按钮。

...

'class'=>'btn showModalButton',

...

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

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