From 4c871b7e55763c5b61fc6fcf29dd5ad0f58fc0bf Mon Sep 17 00:00:00 2001
From: Eugeny Galkovskiy <zhegal@gmail.com>
Date: Fri, 8 Sep 2017 14:23:00 +0300
Subject: [PATCH] new modal styles+script

---
 frontend/assets/AppAsset.php    |   2 ++
 frontend/views/layouts/main.php | 124 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------
 frontend/web/css/custom.css     |  13 ++++++++-----
 frontend/web/css/modal.css      |  61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/web/js/modal.js        |  97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 227 insertions(+), 70 deletions(-)
 create mode 100644 frontend/web/css/modal.css
 create mode 100644 frontend/web/js/modal.js

diff --git a/frontend/assets/AppAsset.php b/frontend/assets/AppAsset.php
index 43e0171..b43ffb8 100755
--- a/frontend/assets/AppAsset.php
+++ b/frontend/assets/AppAsset.php
@@ -20,6 +20,7 @@
             'css/owl.theme.css',
             '//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800',
             'css/custom.css',
+            'css/modal.css',
         ];
         public $js = [
             'js/jquery.cookie.js',
@@ -29,6 +30,7 @@
             'js/front.js',
             'js/owl.carousel.min.js',
             'js/script.js',
+            'js/modal.js',
         ];
         public $depends = [
             'yii\web\YiiAsset',
diff --git a/frontend/views/layouts/main.php b/frontend/views/layouts/main.php
index 8424d2b..c9f3d7d 100755
--- a/frontend/views/layouts/main.php
+++ b/frontend/views/layouts/main.php
@@ -344,79 +344,72 @@ _________________________________________________________ -->
         
         <!-- *** FeedBack MODAL ***
 _________________________________________________________ -->
-        
-        <div class="modal fade" id="feedback-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
-          <div class="modal-dialog">
-            
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
-                <h3 class="modal-title" id="Login">Feedback</h3>
-              </div>
-              <div class="modal-body">
-                  
-                  <?php $form = ActiveForm::begin(
-                      [
-                          'id'     => 'feedback-form',
-                          'method' => 'POST',
-                          'action' => '/site/feedback',
-                      ]
-                  ); ?>
-                  
-                  <?= $form->field($feedback, 'name')
-                           ->textInput(); ?>
-                  
-                  <?= $form->field($feedback, 'email')
-                           ->textInput(); ?>
-                  
-                  <?= $form->field($feedback, 'phone')
-                           ->textInput(); ?>
-                  
-                  <?= $form->field($feedback, 'message')
-                           ->textarea(
-                               [
-                                   'rows' => 4,
-                               ]
-                           ); ?>
-                
-                <p class="text-center">
-                    <?= Html::submitButton(
-                        'Send',
+        <div class="forms_" id="feedback-modal" aria-labelledby="Login" style="display:none;" aria-hidden="true">
+            <div class="forms_wr_">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
+                    <h3 class="modal-title" id="Login">Feedback</h3>
+                </div>
+                <div class="modal-body">
+
+                    <?php $form = ActiveForm::begin(
                         [
-                            'class' => 'send-form btn btn-lg btn-template-primary',
+                            'id'     => 'feedback-form',
+                            'method' => 'POST',
+                            'action' => '/site/feedback',
                         ]
-                    ) ?>
-                </p>
-                  
-                  <?php ActiveForm::end(); ?>
-              
-              </div>
+                    ); ?>
+
+                    <?= $form->field($feedback, 'name')
+                        ->textInput(); ?>
+
+                    <?= $form->field($feedback, 'email')
+                        ->textInput(); ?>
+
+                    <?= $form->field($feedback, 'phone')
+                        ->textInput(); ?>
+
+                    <?= $form->field($feedback, 'message')
+                        ->textarea(
+                            [
+                                'rows' => 4,
+                            ]
+                        ); ?>
+
+                    <p class="text-center">
+                        <?= Html::submitButton(
+                            'Send',
+                            [
+                                'class' => 'send-form btn btn-lg btn-template-primary',
+                            ]
+                        ) ?>
+                    </p>
+
+                    <?php ActiveForm::end(); ?>
+
+                </div>
             </div>
-          </div>
+            <div class="overlay-new"></div>
         </div>
         
         <!-- *** FeedBack MODAL END *** -->
         
         <!-- *** FeedBack MODAL ***
 _________________________________________________________ -->
-        
-        <div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="Success" aria-hidden="true">
-          <div class="modal-dialog">
-            
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
-                <h3 class="modal-title" id="Success">Success</h3>
-              </div>
-              <div class="modal-body">
-                
-                <p>Thank for your reply, we will call you, maybe.</p>
-                <p class="text-center">
-                  <button type="button" class="btn btn-template-primary" data-dismiss="modal">Close</button>
-                </p>
-              </div>
+        <div class="success_" id="success-modal" aria-labelledby="Success" aria-hidden="true">
+            <div class="forms_wr_">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
+                    <h3 class="modal-title" id="Success">Success</h3>
+                </div>
+                <div class="modal-body">
+
+                    <p>Thank for your reply, we will call you, maybe.</p>
+                    <p class="text-center">
+                        <button type="button" class="btn btn-template-primary" data-dismiss="modal">Close</button>
+                    </p>
+                </div>
             </div>
-          </div>
         </div>
         
         <!-- *** FeedBack MODAL END *** -->
@@ -463,7 +456,7 @@ _________________________________________________________ -->
                         <?php
                     }
                 ?>
-              <a href="#" class="btn btn-template-transparent-primary" data-toggle="modal" data-target="#feedback-modal">Contact us!</a>
+              <a href="#" class="btn btn-template-transparent-primary modal-link" data-form="feedback-modal">Contact us!</a>
             </div>
             
             <div class="col-md-4 col-sm-12 col-md-offset-2">
@@ -519,10 +512,11 @@ _________________________________________________________ -->
         <!-- /#footer -->
         
         <!-- *** FOOTER END *** -->
-        
+
         <span id="back-to-top" title="Back to top"><i class="fa fa-arrow-up"></i></span>
       
       </div>
+      <div id="overlay" style="display:none;"></div>
       <!-- /#all -->
         <?php $this->endBody() ?>
     </body>
diff --git a/frontend/web/css/custom.css b/frontend/web/css/custom.css
index ca45304..3c45d28 100755
--- a/frontend/web/css/custom.css
+++ b/frontend/web/css/custom.css
@@ -87,13 +87,14 @@
 
 #back-to-top {
     position: fixed;
-    top: 100px;
-    left: 0;
+    bottom: 50px;
+    right: 50px;
     z-index: 9999;
-    width: 40px;
-    height: 40px;
+    width: 60px;
+    height: 60px;
     text-align: center;
-    line-height: 30px;
+    line-height: 50px;
+    font-size: 32px;
     background: #38a7bb;
     color: #fff;
     cursor: pointer;
@@ -101,6 +102,8 @@
     transition: opacity 0.2s ease-out;
     opacity: 0;
     padding: 4px 1px 4px 0;
+    border-radius: 50%;
+    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.2);
 }
 
 #back-to-top:hover {
diff --git a/frontend/web/css/modal.css b/frontend/web/css/modal.css
new file mode 100644
index 0000000..4b6aba7
--- /dev/null
+++ b/frontend/web/css/modal.css
@@ -0,0 +1,61 @@
+.forms_ {
+    z-index: 10050;
+    display: none;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    top: 0;
+    left: 0;
+    padding-bottom: 120px;
+}
+#success_form, .forms_ {
+    display: none;
+    z-index: 10050;
+}
+.forms_wr_ {
+    position: absolute;
+    width: 555px;
+    border-radius: 4px;
+    left: 50%;
+    margin-left: -277px;
+    top: 0;
+    background: #fff;
+    margin-bottom: 120px;
+    margin-top: 30px;
+    z-index: 2;
+}
+.modal-body {
+    padding: 20px 30px;
+    margin: 0 auto;
+}
+#overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    top: 0;
+    left: 0;
+    z-index: 10000;
+    opacity: .9;
+    cursor: pointer;
+    display: none;
+}
+.overlay-new {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+.success_ {
+    position: fixed;
+    display: none;
+    left: 0;
+    width: 100%;
+}
+.success_ .forms_wr_ {
+    box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.34);
+}
\ No newline at end of file
diff --git a/frontend/web/js/modal.js b/frontend/web/js/modal.js
new file mode 100644
index 0000000..c12d3b6
--- /dev/null
+++ b/frontend/web/js/modal.js
@@ -0,0 +1,97 @@
+$(
+  function() {
+
+
+      modalForms();
+      closeForms();
+      function modalForms() {
+          $('body').on('click','.modal-link', function (e) {
+              e.preventDefault();
+
+
+              var idForm = $(this).data('form');
+              // console.log(idForm);
+              // var pos = ($(window).scrollTop()) + 30;
+              $('#overlay').fadeIn(400,
+                  function(){
+                      $('#'+idForm)
+                          .css('display', 'block')
+                          .animate({opacity: 1}, 200);
+                  });
+              $("body").addClass("off-scroll");
+          })
+      }
+      function closeForms() {
+          $('.close, #overlay').click( function(){
+              $('.forms_').animate({opacity: 0, top: '0'}, 200,function(){
+                  $(this).css('display', 'none');
+                  $('#overlay').fadeOut(400);
+              });
+              $('#success_form').animate({opacity: 0, top: '0'}, 200,function(){
+                  $(this).css('display', 'none');
+                  $(this).css({top:'50%'});
+              });
+              $("body").removeClass("off-scroll");
+          });
+      }
+
+
+      $(".on_input_").on('click', function(){
+          $(this).addClass("actived");
+          $(this).parent().find("input").focus();
+      });
+      $(".forms_ input").on('focusout', function(){
+          $(".on_input_.actived").removeClass("actived");
+      });
+
+
+      $(document)
+          .on(
+              'beforeSubmit', '.forms_ form', function() {
+                  var f = this;
+                  var form = $(this);
+                  var formData = form.serialize();
+                  console.log(formData);
+                  $.ajax(
+                      {
+                          url: form.attr("action"),
+                          type: form.attr("method"),
+                          data: formData,
+                          success: function(data) {
+                              f.reset();
+                              // form.replaceWith(data.alert)
+                              // $(".modal-dialog").append(data.alert);
+                              // setTimeout(function(){location.reload()}, 5000);
+                              $(".close").click();
+                              $(".success_").animate({opacity: 1, top: '40'}, 200).addClass("done_");
+                              setTimeout(function(){$(".success_").animate({opacity: 0, top: '0'}, 200,function(){
+                                  $(this).removeClass("done_");
+                              })}, 4000);
+
+                          },
+                          error: function() {
+
+                          }
+                      }
+                  );
+              }
+          )
+          .on(
+              'submit', '.forms_ form', function(e) {
+                  e.preventDefault();
+              }
+          );
+
+
+      $(".bnm.btn").on('click', function(){
+          $("#booknow-modal .modal-title").html($(this).data('title'));
+          $("#booknow-modal #booknow-tour").val($(this).data('title'));
+      });
+      $(".success_ button").click(function(){
+          $(".success_").removeClass("done_");
+      });
+      $(".overlay-new").click(function(){
+          $(".close").click();
+      });
+  }
+);
\ No newline at end of file
--
libgit2 0.21.4