Модальное окно на css, как сделать модальное окно

Привет всем, расскажу об одной очень удобной штуке, которая называется модальное окно, мы разберем, как сделать модальное окно ? Многие не понимаю что это такое, я постараюсь объяснить на понятном для вас языке, другими словами — это всплывающее окно при нажатии на кнопку или текст.

Внутри этого окна, может быть любая информация (видео, картинка, код и т.д.) Я сейчас начал больше пользоваться  модальным окном, как есть какой-то материал, который нужно допустим чтоб он не высвечивался на странице а допустим, была картинка, при нажатии на нее всплывало окно и информацией.

Я недавно делал такое на одном сайте, вставлял картинку на главной, даже не картинку а скриншот из видео ютуба, и при нажатии всплывает окно где показывает видео. Пример такого окна можно увидеть у меня на странице с игрой, вот ссылка, принцип такой же, жмешь на картинку всплывает окно с игрой. Сделал так по скольку расширение игры больше по ширине, чем у меня колонка для контента, вот такой выход из ситуации я нашел.

Еще один пример, где я вставил также в окно, код баннера и сам баннер, на странице партнерской программы.

Рассмотрим модальное окно на css, чтоб не морочить голову, будем использовать стили, то-есть прописывает стили в основном файле и код в наше окно, рассмотрим все в подробностях, что и как.

Модальное окно на css, как сделать модальное окно

Первое что нам нужно это стили, копируем полностью код со стилями, который ниже и вставляем его в ваш основной файл стилей, то-есть в style.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

.Window {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.7);
 z-index: 99999;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 display: none;
 pointer-events: none;
}
 
.Window:target {
 display: block;
 pointer-events: auto;
}
 
.Window > div {
 width: 460px;
 position: relative;
 margin: 10% auto;
 padding: 30px 10px 10px;
 border-radius: 10px;
 background: #fff;
 box-shadow: 0px 0px 20px 2px;
}
 
.close {
 background: #cc3300;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}
 
.close:hover { background: #990000; }

Сохраняем, можно поиграться со стилями, и что-то сделать красивее, поменять фон, рамку другую сделать и так дальше. Переходим на страницу где вы хотите чтоб у вас всплывало данное окно, и вставьте следующий код:

1
2
3
4
5
6
7

<a href="#ModalOpen" title="">Кнопка</a>
<div id="ModalOpen" class="Window">
 <div>
  <a href="#close" title="Закрыть" class="close">X</a>
  Здесь будет содержимое окна
 </div>
</div>

Теперь немного разберем что в нем, нужно вам поменять. Где прописано «Кнопка» там вы можете вставить, как картинку таи текст, вообще что хотите, то-есть при нажатии на её, будет открываться окно. Там где прописано «Здесь будет содержимое окна» вставьте то что вы бы хотели видеть в всплывающем окне, вот в принципе и все.

Пользуйтесь с удовольствием, рекомендую ! Кто знает еще какие-то методы чтоб проще все это было, пишите в комментария, если что, до пишем статью.

НОВОСТИ !

Ну и на по следок новость как всегда, что-то я зачастил с новостями уже )) Сделал себе небольшую страничку с партнерской программой, в виде одностраничного сайта, порошу всех перейти на нее и посмотреть, может кто-то даст еще какие-то советы интересные, например что-то дополнить, ну вы понимаете о чем я говорю. Еще есть некоторые мысли по ней, чтоб добавить видео со мной, может инструкцию, ну что-то в этом роде, Вообщем жду от вас комментарий !

С уважением Евгений Смецкий