Всплывающие окна и еще их называют popup окна, есть практически на каждом сайте, будь то форма обратного звонка или форма отправки сообщения. Самое время реализовать такую форму. Я буду делать простую форму чтобы легче было воспринимать материал. Наша форма будет плавно всплывать по клику на ссылку.
Демонстрация примера
Заказать звонок
В нашей верстке будет три файла index.html, style.css, main.js
Важно подключить скрипты и стили
Для начала нам нужно подключить jquery в <head> я буду это делать это через CDN, т. е скрипт будет подгружаться со стороннего сервера. Так же подключаю файл main.js перед закрывающимся тегом </body>. Ниже в коде я их уже подключил.
Код Html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Модальное окно</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> </head> <body> <div class="container"> <a href="" class="call-back">Открыть окно</a> </div> <div class="modal-section"> <div class="modal"> <span class="modal-close"></span> <div class="modal-title">Заказать звонок</div> <div class="modal-content"> <form class="form"> <label class="form-label">Имя</label> <input type="text" class="form-input"> <label class="form-label">Телефон</label> <input type="text" class="form-input" id="phone"> <input type="submit" class="form-submit" value="Отправить"> </form> </div> <div class="modal-footer"></div> </div> </div> </body> </html> |
Код Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300&display=swap"); * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Flex", sans-serif; } .container { width: 50%; margin: 100px auto; } .call-back{ background-color: #ff6700; padding: 15px 30px; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .modal-section { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); height: 100vh; z-index: 100; display: none; } .modal { background: #fff; max-width: 500px; padding: 40px; left: 50%; top: 50%; position: relative; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .modal-close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: #ff8500; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .modal-close::after { content: ""; width: 25px; height: 2px; background: #fff; position: absolute; -webkit-transform: rotate(140deg); -ms-transform: rotate(140deg); transform: rotate(140deg); } .modal-close::before { content: ""; width: 25px; height: 2px; background: #fff; position: absolute; -webkit-transform: rotate(-140deg); -ms-transform: rotate(-140deg); transform: rotate(-140deg); } .modal-title { font-size: 30px; font-weight: 500; text-align: center; margin-bottom: 30px; } .form-input { width: 100%; padding: 10px; outline: none; border: 1px solid #d5d5d5; margin-bottom: 20px; } .form-submit { outline: none; border: none; padding: 15px 30px; background: #ff8500; color: #fff; font-weight: 400; width: 50%; font-size: 16px; cursor: pointer; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .form-label { margin-bottom: 5px; color: #333; } |
Код JS (Jquery)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
jQuery(document).ready(() => { jQuery('.call-back').on('click', (e) => { e.preventDefault(); $modal = $(".modal-section"); $myModal = $modal.data("modal"); jQuery('.modal-section').fadeIn(); }); jQuery('.call-outline').on('click', (e) => { e.preventDefault(); jQuery('.modal-section').fadeIn(); }); jQuery('.modal-close').on('click', () => { jQuery('.modal-section').fadeOut(); }); jQuery('.call-outline').on('click', (e) => { e.preventDefault(); jQuery('.modal-section').fadeIn(); }); jQuery(document).click(function (e) { if (jQuery(e.target).is('.modal-section')) { jQuery('.modal-section').fadeToggle(); jQuery('body').css("overflow", "auto"); } }); }) |
