Различия

Показаны различия между двумя версиями страницы.

--- модальное_окно [2022/01/19 07:52] – admin
+++ модальное_окно [2022/02/11 17:55] (текущий) – внешнее изменение 127.0.0.1
@@ Строка 1: / Строка 1: @@
 <code | html button>
-<a class="btn btn-primary" data-toggle="modal" data-target="#windowModal" href="/form/callme">Callme</a>
+<a class="btn btn-primary js_openWindowModal" data-toggle="modal" data-target="#windowModal" href="/form/callme">Callme</a>
 </code>
@@ Строка 8: / Строка 8: @@
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-body"><img src="preload.gif"></div>
+        <div style="margin:auto">
+            <img class="img" src="<?= Url::to(['/img/preload.gif'])?>">
+        </div>
     </div>
   </div>
 </div>
+</code>
+<code | Yii2 js>
+<?php
+$this->registerJs("
+    $(document).on('click', '.js_openWindowModal', function (event) {
+        event.preventDefault();
+        $('#windowModal').modal('show').find('.modal-content').load($(this).attr('href'));
+    });
+");
+?>
+</code>
+<code | 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,
+        ]);
+    }
+}
+</code>
+<code | 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(); ?>
+</code>
+<code | Yii2 JS для формы>
+<?php
+$this->registerJS("
+    $(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;
+    });
+");
+?>
 </code>