Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).
Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.
Содержание
Заготовка простого всплывающего popup-окна на HTML и CSS
Решение взято с itchief.ru
Всего нужно будет три блока кода:
Используем Код №1:
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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!-- HTML модального окна --> <div id="openModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Заголовок</h3> <a href="#close" title="Close" class="close">×</a> </div> <div class="modal-body"> <ul> <li>Содержание</li> <li>Содержание</li> <li>Содержание</li> <li>Содержание</li> </ul> </div> </div> </div> </div> <!-- HTML кнопки --> <a href="#openModal">Открыть модальное окно</a> <!-- CSS-стили модального окна --> <style> /* Стили всплывающего окна по-умолчанию */ .modal { position: fixed; /* фиксированное положение */ top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); /* фон */ z-index: 1050; opacity: 0; /* по умолчанию модальное окно прозрачно */ -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; /* анимация перехода */ pointer-events: none; /* элемент невидим для событий мыши */ margin: 0; padding: 0; } /* При отображении модального окно */ .modal:target { opacity: 1; /* делаем окно видимым */ pointer-events: auto; /* элемент видим для событий мыши */ overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */ } /* ширина модального окна и его отступы от экрана */ .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 30px auto; /* отображение окна по центру */ } } /* Стили для блока с контентом окна */ .modal-content { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; } @media (min-width: 768px) { .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); box-shadow: 0 5px 15px rgba(0,0,0,.5); } } /* Стили заголовка окна */ .modal-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eceeef; } .modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; font-weight: 500; } /* Стили кнопки "х" ("Закрыть") */ .close { float: right; font-family: sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; text-decoration: none; } /* Стили для закрывающей кнопки в фокусе или наведении */ .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; opacity: .75; } /* Стили блока основного содержимого окна */ .modal-body { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px; overflow: auto; } </style> |
Примеры всплывающего окна на сайте
Несколько примеров из Codepen, на которые можно перейти и посмотреть более подробно.
Модальные окна на HTML и CSS
See the Pen
Модальные всплывающие окна с помощью CSS3 без Javascript by vavik (@vavik96)
on CodePen.
See the Pen
Pop-up design by fajjet (@fajjet)
on CodePen.
See the Pen
Pop Up Login Form by Afdallah Wahyu Arafat (@codot)
on CodePen.
Модальные окна с JavaScript
See the Pen
Responsive Modal Design by qfurs (@qfurs)
on CodePen.
See the Pen
Resposive Pop-up on css3 by Daniel (@31russ)
on CodePen.
See the Pen
Pop-up Dialog Box (LIGHTBOX) by Dominic Francois (@DominicFrancois)
on CodePen.
See the Pen
Responsive CSS and JS Pop-up by Rachel Bull (@rachel_web)
on CodePen.
See the Pen
Smart Welcome Popup by Harjeet Singh (@sharjeet)
on CodePen.
See the Pen
Daily UI 016 — Pop Up (ReactJs) by Chase Allbee (@ChaseAllbee)
on CodePen.
See the Pen
Modal Animations by qfurs (@qfurs)
on CodePen.