24 Ноя в 09:55
Модальное окно (простое)
Требуется только jQuery.
HTML:
1 2 3 4 5 6 7 8 |
<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:
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 |
.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:
1 2 3 4 5 6 |
$('.show-popup').on('click', function(){ $('.lite-popup-wrapper').show(); }); $('.closeblock').on('click', function(){ $('.lite-popup-wrapper').hide(); }); |
Показать окно
Содержимое
+