How to add Bootstrap Modal in Yii2?

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);
    ?>

This is my form, I'm trying to get Modal when click on create button, so that View will be on Modal. what i'm doing wrong? I need on form submit Modal should pop up and ask user Job has created do you want to send this information to client if user click yes then sms and email with above details should be send to client if user says no it should return to edit mode and the created job code should be flushed

How to achieve this in Yii2?

Answer 1

Change Modal id from jobPop to 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

Ideal Situation:

1. have the modal in your layout file.

   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();
   

2. Add have a js file - with js code to load modal -

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

• Include the js file in your application. assets/AppAsset.php :

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

3. Add the the css class: 'showModalButton' to all buttons that content in the modal.

   ...
   
   'class'=>'btn showModalButton',
   
   ...
   

Modify you controller action to render content via ajax if request was done via ajax:

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