Comment ajouter Modal Bootstrap dans Yii2?

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

C'est ma forme, je vais essayer d'obtenir Modal lorsque vous cliquez sur le bouton créer, de sorte que la Vue sera Modaux. ce que je fais mal?
J'ai besoin sur soumettre le formulaire Modal devrait apparaître et demander à l'utilisateur de l'Emploi a créé voulez-vous envoyer cette information au client si l'utilisateur cliquez sur oui, puis sms et e-mail avec les détails ci-dessus doit être envoyer au client si l'utilisateur dit pas qu'il doit retourner en mode édition et la création de code du travail doit être rincé

Comment réaliser cela dans Yii2?

  • Juste éviter de soumettre et en fonction de l'utilisateur, la réponse se soumettre à des mesures appropriées, par ajax ou modifier activeForm action par jquery.
InformationsquelleAutor JKLM | 2015-07-08
  1. 4

    Changement Modal id de jobPop à modal.
    par exemple,

     <?php 
Modal::begin([
'header'=>'<h4>Job Created</h4>',
'id'=>'modal',
'size'=>'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
    InformationsquelleAutor GAMITG
  2. 1

    Situation Idéale:
    1. ont le modal dans votre fichier de mise en page.

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

    1. Ajouter avoir un fichier js - avec code js à la charge modale 

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

      });

      • Inclure le fichier js dans votre application. assets/AppAsset.php :

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

    2. Ajouter la classe css: 'showModalButton' à tous les boutons que contenu dans le modal.

    ...

    'class'=>'btn showModalButton',

    ...

    Modifier vous action du contrôleur pour afficher du contenu via ajax si la demande a été faite via ajax: 

    if(Yii::$app->request->isAjax){
return $this->renderAjax('your-view-file', [
'model' => $model,
]);
    • Utile pour les dynamiques des valeurs d'en-tête. Merci beaucoup!
    InformationsquelleAutor Kalu