How to add Bootstrap Modal in Yii2? - modal-dialog

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

Ideal Situation:
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();
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'];
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,
]);
}

Answer 2

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