доол
???
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться22020-08-02 13:43:28
дадада
Поделиться32020-09-18 19:56:45
Код:
<!--HTML--> <button class="btn btn_white" data-modal>кнопка</button> <div class="modal-1"> <div class="modal__dialog"> <div class="modal__content"> <form action="#"> <div class="modal__close" data-close>×</div> <div class="modal__title">!</div> </form> </div></div></div> <script> const modalTrigger = document.querySelectorAll('[data-modal]'), modal = document.querySelector('.modal-1'), modalCloseBtn = document.querySelector('[data-close]'); modalTrigger.forEach(btn => { btn.addEventListener('click', function() { modal.classList.add('show'); modal.classList.remove('hide'); document.body.style.overflow = 'hidden'; }); }); function closeModal() { modal.classList.add('hide'); modal.classList.remove('show'); document.body.style.overflow = ''; } modalCloseBtn.addEventListener('click', closeModal); </script> <style> .modal-1 { position: ; top: 0; left: 0; z-index: 1050; display: none; width: 10px height: 10px; overflow: hidden; background-color: rgba(0, 0, 0, .5) } .modal__dialog { max-width: 500px; margin: 40px auto } .modal__content { position: relative; width: 100%; padding: 40px; background-color: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; max-height: 80vh; overflow-y: auto } .modal__close { position: absolute; top: 8px; right: 14px; font-size: 30px; color: #000; opacity: .5; font-weight: 700; border: none; background-color: transparent; cursor: pointer } .modal__title { text-align: center; font-size: 22px; text-transform: uppercase } .modal__input { display: block; margin: 20px auto 20px auto; width: 280px; height: 50px; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, .2); border: none; font-size: 18px; text-align: center; padding: 0 20px; outline: 0 } .modal .btn { display: block; width: 280px; margin: 0 auto } .show { display: block } .hide { display: none } .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: 0.1; } to { opacity: 1; } } </style>
- Подпись автора
Страница: 1