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 20 'css/owl.theme.css',
21 21 '//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800',
22 22 'css/custom.css',
  23 + 'css/modal.css',
23 24 ];
24 25 public $js = [
25 26 'js/jquery.cookie.js',
... ... @@ -29,6 +30,7 @@
29 30 'js/front.js',
30 31 'js/owl.carousel.min.js',
31 32 'js/script.js',
  33 + 'js/modal.js',
32 34 ];
33 35 public $depends = [
34 36 'yii\web\YiiAsset',
... ...
frontend/views/layouts/main.php
  Show/Hide comments   View file @4c871b7
... ... @@ -344,79 +344,72 @@ _________________________________________________________ -->
344 344  
345 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 391 </div>
395   - </div>
  392 + <div class="overlay-new"></div>
396 393 </div>
397 394  
398 395 <!-- *** FeedBack MODAL END *** -->
399 396  
400 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 412 </div>
419   - </div>
420 413 </div>
421 414  
422 415 <!-- *** FeedBack MODAL END *** -->
... ... @@ -463,7 +456,7 @@ _________________________________________________________ --&gt;
463 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 460 </div>
468 461  
469 462 <div class="col-md-4 col-sm-12 col-md-offset-2">
... ... @@ -519,10 +512,11 @@ _________________________________________________________ --&gt;
519 512 <!-- /#footer -->
520 513  
521 514 <!-- *** FOOTER END *** -->
522   -
  515 +
523 516 <span id="back-to-top" title="Back to top"><i class="fa fa-arrow-up"></i></span>
524 517  
525 518 </div>
  519 + <div id="overlay" style="display:none;"></div>
526 520 <!-- /#all -->
527 521 <?php $this->endBody() ?>
528 522 </body>
... ...
frontend/web/css/custom.css
  Show/Hide comments   View file @4c871b7
... ... @@ -87,13 +87,14 @@
87 87  
88 88 #back-to-top {
89 89 position: fixed;
90   - top: 100px;
91   - left: 0;
  90 + bottom: 50px;
  91 + right: 50px;
92 92 z-index: 9999;
93   - width: 40px;
94   - height: 40px;
  93 + width: 60px;
  94 + height: 60px;
95 95 text-align: center;
96   - line-height: 30px;
  96 + line-height: 50px;
  97 + font-size: 32px;
97 98 background: #38a7bb;
98 99 color: #fff;
99 100 cursor: pointer;
... ... @@ -101,6 +102,8 @@
101 102 transition: opacity 0.2s ease-out;
102 103 opacity: 0;
103 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 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 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 98 \ No newline at end of file
... ...