Yarik / artbox-basic

Commit 4c871b7e55763c5b61fc6fcf29dd5ad0f58fc0bf

Authored by Eugeny Galkovskiy
1 parent e78494f9

new modal styles+script

Showing 5 changed files with 227 additions and 70 deletions   Show diff stats
Inline Side-by-side
frontend/assets/AppAsset.php
  Show/Hide comments   View file @4c871b7
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 'css/owl.theme.css', 20 'css/owl.theme.css',
21 '//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800', 21 '//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800',
22 'css/custom.css', 22 'css/custom.css',
  23 + 'css/modal.css',
23 ]; 24 ];
24 public $js = [ 25 public $js = [
25 'js/jquery.cookie.js', 26 'js/jquery.cookie.js',
@@ -29,6 +30,7 @@ @@ -29,6 +30,7 @@
29 'js/front.js', 30 'js/front.js',
30 'js/owl.carousel.min.js', 31 'js/owl.carousel.min.js',
31 'js/script.js', 32 'js/script.js',
  33 + 'js/modal.js',
32 ]; 34 ];
33 public $depends = [ 35 public $depends = [
34 'yii\web\YiiAsset', 36 'yii\web\YiiAsset',
frontend/views/layouts/main.php
  Show/Hide comments   View file @4c871b7
@@ -344,79 +344,72 @@ _________________________________________________________ --> @@ -344,79 +344,72 @@ _________________________________________________________ -->
344 344
345 <!-- *** FeedBack MODAL *** 345 <!-- *** FeedBack MODAL ***
346 _________________________________________________________ --> 346 _________________________________________________________ -->
347 -  
348 - <div class="modal fade" id="feedback-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">  
349 - <div class="modal-dialog">  
350 -  
351 - <div class="modal-content">  
352 - <div class="modal-header">  
353 - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>  
354 - <h3 class="modal-title" id="Login">Feedback</h3>  
355 - </div>  
356 - <div class="modal-body">  
357 -  
358 - <?php $form = ActiveForm::begin(  
359 - [  
360 - 'id' => 'feedback-form',  
361 - 'method' => 'POST',  
362 - 'action' => '/site/feedback',  
363 - ]  
364 - ); ?>  
365 -  
366 - <?= $form->field($feedback, 'name')  
367 - ->textInput(); ?>  
368 -  
369 - <?= $form->field($feedback, 'email')  
370 - ->textInput(); ?>  
371 -  
372 - <?= $form->field($feedback, 'phone')  
373 - ->textInput(); ?>  
374 -  
375 - <?= $form->field($feedback, 'message')  
376 - ->textarea(  
377 - [  
378 - 'rows' => 4,  
379 - ]  
380 - ); ?>  
381 -  
382 - <p class="text-center">  
383 - <?= Html::submitButton(  
384 - 'Send', 347 + <div class="forms_" id="feedback-modal" aria-labelledby="Login" style="display:none;" aria-hidden="true">
  348 + <div class="forms_wr_">
  349 + <div class="modal-header">
  350 + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
  351 + <h3 class="modal-title" id="Login">Feedback</h3>
  352 + </div>
  353 + <div class="modal-body">
  354 +
  355 + <?php $form = ActiveForm::begin(
385 [ 356 [
386 - 'class' => 'send-form btn btn-lg btn-template-primary', 357 + 'id' => 'feedback-form',
  358 + 'method' => 'POST',
  359 + 'action' => '/site/feedback',
387 ] 360 ]
388 - ) ?>  
389 - </p>  
390 -  
391 - <?php ActiveForm::end(); ?>  
392 -  
393 - </div> 361 + ); ?>
  362 +
  363 + <?= $form->field($feedback, 'name')
  364 + ->textInput(); ?>
  365 +
  366 + <?= $form->field($feedback, 'email')
  367 + ->textInput(); ?>
  368 +
  369 + <?= $form->field($feedback, 'phone')
  370 + ->textInput(); ?>
  371 +
  372 + <?= $form->field($feedback, 'message')
  373 + ->textarea(
  374 + [
  375 + 'rows' => 4,
  376 + ]
  377 + ); ?>
  378 +
  379 + <p class="text-center">
  380 + <?= Html::submitButton(
  381 + 'Send',
  382 + [
  383 + 'class' => 'send-form btn btn-lg btn-template-primary',
  384 + ]
  385 + ) ?>
  386 + </p>
  387 +
  388 + <?php ActiveForm::end(); ?>
  389 +
  390 + </div>
394 </div> 391 </div>
395 - </div> 392 + <div class="overlay-new"></div>
396 </div> 393 </div>
397 394
398 <!-- *** FeedBack MODAL END *** --> 395 <!-- *** FeedBack MODAL END *** -->
399 396
400 <!-- *** FeedBack MODAL *** 397 <!-- *** FeedBack MODAL ***
401 _________________________________________________________ --> 398 _________________________________________________________ -->
402 -  
403 - <div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="Success" aria-hidden="true">  
404 - <div class="modal-dialog">  
405 -  
406 - <div class="modal-content">  
407 - <div class="modal-header">  
408 - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>  
409 - <h3 class="modal-title" id="Success">Success</h3>  
410 - </div>  
411 - <div class="modal-body">  
412 -  
413 - <p>Thank for your reply, we will call you, maybe.</p>  
414 - <p class="text-center">  
415 - <button type="button" class="btn btn-template-primary" data-dismiss="modal">Close</button>  
416 - </p>  
417 - </div> 399 + <div class="success_" id="success-modal" aria-labelledby="Success" aria-hidden="true">
  400 + <div class="forms_wr_">
  401 + <div class="modal-header">
  402 + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
  403 + <h3 class="modal-title" id="Success">Success</h3>
  404 + </div>
  405 + <div class="modal-body">
  406 +
  407 + <p>Thank for your reply, we will call you, maybe.</p>
  408 + <p class="text-center">
  409 + <button type="button" class="btn btn-template-primary" data-dismiss="modal">Close</button>
  410 + </p>
  411 + </div>
418 </div> 412 </div>
419 - </div>  
420 </div> 413 </div>
421 414
422 <!-- *** FeedBack MODAL END *** --> 415 <!-- *** FeedBack MODAL END *** -->
@@ -463,7 +456,7 @@ _________________________________________________________ --&gt; @@ -463,7 +456,7 @@ _________________________________________________________ --&gt;
463 <?php 456 <?php
464 } 457 }
465 ?> 458 ?>
466 - <a href="#" class="btn btn-template-transparent-primary" data-toggle="modal" data-target="#feedback-modal">Contact us!</a> 459 + <a href="#" class="btn btn-template-transparent-primary modal-link" data-form="feedback-modal">Contact us!</a>
467 </div> 460 </div>
468 461
469 <div class="col-md-4 col-sm-12 col-md-offset-2"> 462 <div class="col-md-4 col-sm-12 col-md-offset-2">
@@ -519,10 +512,11 @@ _________________________________________________________ --&gt; @@ -519,10 +512,11 @@ _________________________________________________________ --&gt;
519 <!-- /#footer --> 512 <!-- /#footer -->
520 513
521 <!-- *** FOOTER END *** --> 514 <!-- *** FOOTER END *** -->
522 - 515 +
523 <span id="back-to-top" title="Back to top"><i class="fa fa-arrow-up"></i></span> 516 <span id="back-to-top" title="Back to top"><i class="fa fa-arrow-up"></i></span>
524 517
525 </div> 518 </div>
  519 + <div id="overlay" style="display:none;"></div>
526 <!-- /#all --> 520 <!-- /#all -->
527 <?php $this->endBody() ?> 521 <?php $this->endBody() ?>
528 </body> 522 </body>
frontend/web/css/custom.css
  Show/Hide comments   View file @4c871b7
@@ -87,13 +87,14 @@ @@ -87,13 +87,14 @@
87 87
88 #back-to-top { 88 #back-to-top {
89 position: fixed; 89 position: fixed;
90 - top: 100px;  
91 - left: 0; 90 + bottom: 50px;
  91 + right: 50px;
92 z-index: 9999; 92 z-index: 9999;
93 - width: 40px;  
94 - height: 40px; 93 + width: 60px;
  94 + height: 60px;
95 text-align: center; 95 text-align: center;
96 - line-height: 30px; 96 + line-height: 50px;
  97 + font-size: 32px;
97 background: #38a7bb; 98 background: #38a7bb;
98 color: #fff; 99 color: #fff;
99 cursor: pointer; 100 cursor: pointer;
@@ -101,6 +102,8 @@ @@ -101,6 +102,8 @@
101 transition: opacity 0.2s ease-out; 102 transition: opacity 0.2s ease-out;
102 opacity: 0; 103 opacity: 0;
103 padding: 4px 1px 4px 0; 104 padding: 4px 1px 4px 0;
  105 + border-radius: 50%;
  106 + box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.2);
104 } 107 }
105 108
106 #back-to-top:hover { 109 #back-to-top:hover {
frontend/web/css/modal.css 0 → 100644
  Show/Hide comments   View file @4c871b7
  1 +.forms_ {
  2 + z-index: 10050;
  3 + display: none;
  4 + position: fixed;
  5 + width: 100%;
  6 + height: 100%;
  7 + overflow-y: scroll;
  8 + top: 0;
  9 + left: 0;
  10 + padding-bottom: 120px;
  11 +}
  12 +#success_form, .forms_ {
  13 + display: none;
  14 + z-index: 10050;
  15 +}
  16 +.forms_wr_ {
  17 + position: absolute;
  18 + width: 555px;
  19 + border-radius: 4px;
  20 + left: 50%;
  21 + margin-left: -277px;
  22 + top: 0;
  23 + background: #fff;
  24 + margin-bottom: 120px;
  25 + margin-top: 30px;
  26 + z-index: 2;
  27 +}
  28 +.modal-body {
  29 + padding: 20px 30px;
  30 + margin: 0 auto;
  31 +}
  32 +#overlay {
  33 + position: fixed;
  34 + width: 100%;
  35 + height: 100%;
  36 + background: #000;
  37 + top: 0;
  38 + left: 0;
  39 + z-index: 10000;
  40 + opacity: .9;
  41 + cursor: pointer;
  42 + display: none;
  43 +}
  44 +.overlay-new {
  45 + width: 100%;
  46 + height: 100%;
  47 + cursor: pointer;
  48 + position: absolute;
  49 + top: 0;
  50 + left: 0;
  51 + z-index: 1;
  52 +}
  53 +.success_ {
  54 + position: fixed;
  55 + display: none;
  56 + left: 0;
  57 + width: 100%;
  58 +}
  59 +.success_ .forms_wr_ {
  60 + box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.34);
  61 +}
0 \ No newline at end of file 62 \ No newline at end of file
frontend/web/js/modal.js 0 → 100644
  Show/Hide comments   View file @4c871b7
  1 +$(
  2 + function() {
  3 +
  4 +
  5 + modalForms();
  6 + closeForms();
  7 + function modalForms() {
  8 + $('body').on('click','.modal-link', function (e) {
  9 + e.preventDefault();
  10 +
  11 +
  12 + var idForm = $(this).data('form');
  13 + // console.log(idForm);
  14 + // var pos = ($(window).scrollTop()) + 30;
  15 + $('#overlay').fadeIn(400,
  16 + function(){
  17 + $('#'+idForm)
  18 + .css('display', 'block')
  19 + .animate({opacity: 1}, 200);
  20 + });
  21 + $("body").addClass("off-scroll");
  22 + })
  23 + }
  24 + function closeForms() {
  25 + $('.close, #overlay').click( function(){
  26 + $('.forms_').animate({opacity: 0, top: '0'}, 200,function(){
  27 + $(this).css('display', 'none');
  28 + $('#overlay').fadeOut(400);
  29 + });
  30 + $('#success_form').animate({opacity: 0, top: '0'}, 200,function(){
  31 + $(this).css('display', 'none');
  32 + $(this).css({top:'50%'});
  33 + });
  34 + $("body").removeClass("off-scroll");
  35 + });
  36 + }
  37 +
  38 +
  39 + $(".on_input_").on('click', function(){
  40 + $(this).addClass("actived");
  41 + $(this).parent().find("input").focus();
  42 + });
  43 + $(".forms_ input").on('focusout', function(){
  44 + $(".on_input_.actived").removeClass("actived");
  45 + });
  46 +
  47 +
  48 + $(document)
  49 + .on(
  50 + 'beforeSubmit', '.forms_ form', function() {
  51 + var f = this;
  52 + var form = $(this);
  53 + var formData = form.serialize();
  54 + console.log(formData);
  55 + $.ajax(
  56 + {
  57 + url: form.attr("action"),
  58 + type: form.attr("method"),
  59 + data: formData,
  60 + success: function(data) {
  61 + f.reset();
  62 + // form.replaceWith(data.alert)
  63 + // $(".modal-dialog").append(data.alert);
  64 + // setTimeout(function(){location.reload()}, 5000);
  65 + $(".close").click();
  66 + $(".success_").animate({opacity: 1, top: '40'}, 200).addClass("done_");
  67 + setTimeout(function(){$(".success_").animate({opacity: 0, top: '0'}, 200,function(){
  68 + $(this).removeClass("done_");
  69 + })}, 4000);
  70 +
  71 + },
  72 + error: function() {
  73 +
  74 + }
  75 + }
  76 + );
  77 + }
  78 + )
  79 + .on(
  80 + 'submit', '.forms_ form', function(e) {
  81 + e.preventDefault();
  82 + }
  83 + );
  84 +
  85 +
  86 + $(".bnm.btn").on('click', function(){
  87 + $("#booknow-modal .modal-title").html($(this).data('title'));
  88 + $("#booknow-modal #booknow-tour").val($(this).data('title'));
  89 + });
  90 + $(".success_ button").click(function(){
  91 + $(".success_").removeClass("done_");
  92 + });
  93 + $(".overlay-new").click(function(){
  94 + $(".close").click();
  95 + });
  96 + }
  97 +);
0 \ No newline at end of file 98 \ No newline at end of file