модальное_окно

Это старая версия документа!


html button

<a class="btn btn-primary js_openWindowModal" data-toggle="modal" data-target="#windowModal" href="/form/callme">Callme</a>

bootstrap 4

<!-- Modal -->
<div class="modal fade" id="windowModal" tabindex="-1" aria-labelledby="windowModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <img src="preload.gif">
    </div>
  </div>
</div>

Yii2 js

$this->registerJs("
    $(document).on('click', '.js_openWindowModal', function () {
            $('#windowModal').modal('show').find('.modal-content').load($(this).href);
    });
");
?>

Yii2 Controller

public function actionCallme() {

    $model = new CallForm();

    if ($model->load(Yii::$app->request->post()) && $model->validate()) {

        try {
                $this->service->create($model);
                if (Yii::$app->request->isAjax) {
                    return Json::encode(array('status' => 'success', 'type' => 'success', 'message' => 'Created successfully.'));
                }
                else {
                    Yii::$app->session->setFlash('success', 'Данные изменены');
                    $url = Url::previous();
                    return $this->redirect($url ?: Url::to(['index']));
                }
                
        } catch (Exception $ex) {
            Yii::$app->errorHandler->logException($e);
            if (Yii::$app->request->isAjax) {
                return Json::encode(array('status' => 'warning', 'type' => 'warning', 'message' => 'Can not created.'));
            } else {
                Yii::$app->session->setFlash('error', $e->getMessage());
            }
        }
    }
    if (Yii::$app->request->isAjax) {
        return $this->renderAjax('view', [
                    'model' => $model,
        ]);
    } else {
        return $this->render('view', [
                    'model' => $model,
        ]);
    }
}

Yii2 view

use yii\bootstrap4\ActiveForm;

<?php $form = ActiveForm::begin(['id' => 'callme-form','options'=>['class'=>'js_modalForm']]); ?>

      <div class="modal-header">
        <h5 class="modal-title" id="windowModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
 
        <?= $form->field($model, 'name')->textInput(['autofocus' => true]) ?>
        <?= $form->field($model, 'email') ?>
        <?= $form->field($model, 'subject') ?>
        <?= $form->field($model, 'body')->textarea(['rows' => 6]) ?>
        <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
            'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>',
            ]) ?>
   </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?>
    </div>
 
<?php ActiveForm::end(); ?>

Yii2 JS

<?php
$this->renderJS("
    $(document).on('beforeSubmit', '.js_modalForm', function (event) {
    
            event.preventDefault();

            var form = $(this);

            $.ajax({
                   url: form.attr('action'), 
                   cache: false,
                   contentType: false,
                   processData: false,
                   data: form.serialize(),
                   type: 'post',
                   beforeSend: function() {
                   },
                   success: function(response){
                       toastr.success('',response.message);
                       $('#windowModal').modal('hide');
                   },
                   complete: function() {
                   },
                   error: function (data) {
                      toastr.warning('','There may a error on uploading. Try again later');
                   }
                });                
            return false;

    });
");

?>

  • модальное_окно.1642586239.txt.gz
  • Последнее изменение: 2022/01/19 11:57
  • (внешнее изменение)