24 Ноя в 09:55
Модальное окно (простое)
Требуется только jQuery.
HTML:
<div class="show-popup">Показать окно</div> <div class="lite-popup-wrapper"> <div class="fon"></div> <div class="popup"> <div class="popup-content">Содержимое</div> <div class="closeblock">+</div> </div> </div>
CSS:
.show-popup { cursor: pointer } .lite-popup-wrapper { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index: 999; } .lite-popup-wrapper .fon { background: rgba(0, 0, 0, 0.8); position:fixed; width:100%; height:100%; } .lite-popup-wrapper .closeblock { cursor: pointer; position: absolute; line-height: 44px; font-size: 44px; transform: rotate(45deg); text-align: center; top: 0; right: 12px; color: #333; } .lite-popup-wrapper .closeblock:hover { color: #000; } .lite-popup-wrapper .popup { position: relative; width: 400px; max-width: 100%; padding: 40px 0 20px; background: #00aeef; color: #fff; text-align: center; font-size: 14px; top: 50vh; margin: -38px auto; // половина высоты окна } .lite-popup-wrapper .popup .popup-content { padding: 0 15px; } /* Эти стили нужны, только если в окне будет форма */ .lite-popup-wrapper .popup textarea, .lite-popup-wrapper .popup input[type='text'], .lite-popup-wrapper .popup input[type='email'] { border:0; font:14px; background:#fff; padding:10px; width:100%; color:#000; } .popupform input[type='submit']{ cursor:pointer; padding:5px 10px; color:#000; }
JS:
$('.show-popup').on('click', function(){ $('.lite-popup-wrapper').show(); }); $('.closeblock').on('click', function(){ $('.lite-popup-wrapper').hide(); });
Показать окно
Содержимое
+