Всплывающее окно HTML и CSS при нажатии на кнопку + Примеры ❎ WpCraft

Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).

Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.

Содержание

Заготовка простого всплывающего popup-окна на HTML и CSS

Решение взято с itchief.ru

Всего нужно будет три блока кода:

HTML модального окна (изначально оно будет скрыто);

HTML вывода ссылки при нажатии на которые будет появляться popup окно;

CSS-стили благодаря которым модальное окно будет появляться или скрываться.

Пример: Что такое всплывающее окно

ОТКРЫТЬ ОКНО

Используем Код №1:



<!-- 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>

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

<h3 class="modal-title">Заголовок</h3>

</div>

<ul>

<li>Содержание</li>

</ul>

</div>

<a href="#openModal">Открыть модальное окно</a>

<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>

Код №1: Заготовка простого всплывающего popup-окна HTML + CSS

Примеры всплывающего окна на сайте

Несколько примеров из Codepen, на которые можно перейти и посмотреть более подробно.

Модальные окна на HTML и CSS

See the Pen
Модальные всплывающие окна с помощью CSS3 без Javascript by vavik (@vavik96)
on CodePen.

Пример popup-окна №1: HTML и CSS

See the Pen
Pop-up design by fajjet (@fajjet)
on CodePen.

Пример всплывающего окна №2: HTML и CSS

See the Pen
Pop Up Login Form by Afdallah Wahyu Arafat (@codot)
on CodePen.

Пример всплывающей формы входа №3: HTML и CSS

Модальные окна с JavaScript

See the Pen
Responsive Modal Design by qfurs (@qfurs)
on CodePen.

Пример popup-окна №1: HTML, CSS, JS

See the Pen
Resposive Pop-up on css3 by Daniel (@31russ)
on CodePen.

Пример попап-окна №2: HTML, CSS, JS

See the Pen
Pop-up Dialog Box (LIGHTBOX) by Dominic Francois (@DominicFrancois)
on CodePen.

Пример модального окна №3: HTML, CSS, JavaScript

See the Pen
Responsive CSS and JS Pop-up by Rachel Bull (@rachel_web)
on CodePen.

Пример всплывающего окна №4: HTML, CSS, JavaScript

See the Pen
Smart Welcome Popup by Harjeet Singh (@sharjeet)
on CodePen.

Пример модального окна приветствия №5: HTML, CSS, JavaScript

See the Pen
Daily UI 016 — Pop Up (ReactJs) by Chase Allbee (@ChaseAllbee)
on CodePen.

Пример модального окна №6: HTML, CSS, JavaScript

See the Pen
Modal Animations by qfurs (@qfurs)
on CodePen.

Пример модального окна №7: Подборка нескольких всплывающих окон на HTML, CSS и JavaScript