Commit eb79b82f845355ffa18a1365254fc53ec77bfa01
1 parent
e0635b75
first
Showing
2 changed files
with
67 additions
and
1 deletions
Show diff stats
frontend/views/site/vacancies.php
| @@ -27,7 +27,28 @@ $(function () { | @@ -27,7 +27,28 @@ $(function () { | ||
| 27 | }); | 27 | }); |
| 28 | });", 3); | 28 | });", 3); |
| 29 | ?> | 29 | ?> |
| 30 | - | 30 | +<script type="text/javascript"> |
| 31 | + $(document).ready(function() { | ||
| 32 | + $('.special-talents-text-2-img').click( function(event){ | ||
| 33 | + event.preventDefault(); | ||
| 34 | + $('#overlay').fadeIn(400, | ||
| 35 | + function(){ | ||
| 36 | + $('#modal_form') | ||
| 37 | + .css('display', 'block') | ||
| 38 | + .animate({opacity: 1, top: '50%'}, 200); | ||
| 39 | + }); | ||
| 40 | + }); | ||
| 41 | + $('#modal_close, #overlay').click( function(){ | ||
| 42 | + $('#modal_form') | ||
| 43 | + .animate({opacity: 0, top: '45%'}, 200, // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх | ||
| 44 | + function(){ | ||
| 45 | + $(this).css('display', 'none'); | ||
| 46 | + $('#overlay').fadeOut(400); | ||
| 47 | + } | ||
| 48 | + ); | ||
| 49 | + }); | ||
| 50 | + }); | ||
| 51 | +</script> | ||
| 31 | <div class="bill-wrap"> | 52 | <div class="bill-wrap"> |
| 32 | <div class="comands-all-wrap"> | 53 | <div class="comands-all-wrap"> |
| 33 | <div class="bill-wrap-img"> | 54 | <div class="bill-wrap-img"> |
| @@ -434,3 +455,21 @@ $(function () { | @@ -434,3 +455,21 @@ $(function () { | ||
| 434 | </div> | 455 | </div> |
| 435 | </div> | 456 | </div> |
| 436 | </div> | 457 | </div> |
| 458 | + | ||
| 459 | +<div id="modal_form"> | ||
| 460 | + <span id="modal_close">X</span> | ||
| 461 | + <form action="" method="post"> | ||
| 462 | + <h3>Простое модальное окно</h3> | ||
| 463 | + <p>Тут может быть рандомная обычная форма например.</p> | ||
| 464 | + <p>Ваше имя<br> | ||
| 465 | + <input type="text" name="your-name" value="" size="40"> | ||
| 466 | + </p> | ||
| 467 | + <p>Ваш телефон<br> | ||
| 468 | + <input type="text" name="your-name" value="" size="40"> | ||
| 469 | + </p> | ||
| 470 | + <p style="text-align: center; padding-bottom: 10px;"> | ||
| 471 | + <input type="submit" value="Отправить"> | ||
| 472 | + </p> | ||
| 473 | + </form> | ||
| 474 | +</div> | ||
| 475 | +<div id="overlay"></div> | ||
| 437 | \ No newline at end of file | 476 | \ No newline at end of file |
frontend/web/css/vacancies.css
| @@ -520,4 +520,31 @@ a.special-talents-text-2-img:hover { | @@ -520,4 +520,31 @@ a.special-talents-text-2-img:hover { | ||
| 520 | } | 520 | } |
| 521 | .scroll-img ul li { | 521 | .scroll-img ul li { |
| 522 | display: inline-block; | 522 | display: inline-block; |
| 523 | +} | ||
| 524 | +#overlay { | ||
| 525 | + z-index: 3; | ||
| 526 | + position: fixed; | ||
| 527 | + background-color: #000; | ||
| 528 | + opacity: 0.8; | ||
| 529 | + width: 100%; | ||
| 530 | + height: 100%; | ||
| 531 | + top: 0; | ||
| 532 | + left: 0; | ||
| 533 | + cursor: pointer; | ||
| 534 | + display: none; | ||
| 535 | +} | ||
| 536 | +#modal_form { | ||
| 537 | + width: 300px; | ||
| 538 | + height: 300px; | ||
| 539 | + border-radius: 5px; | ||
| 540 | + border: 3px #000 solid; | ||
| 541 | + background: #fff; | ||
| 542 | + position: fixed; | ||
| 543 | + top: 45%; | ||
| 544 | + left: 50%; | ||
| 545 | + margin-top: -150px; | ||
| 546 | + margin-left: -150px; | ||
| 547 | + display: none; | ||
| 548 | + opacity: 0; | ||
| 549 | + z-index: 5; | ||
| 523 | } | 550 | } |
| 524 | \ No newline at end of file | 551 | \ No newline at end of file |