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

Три разных примера создания модальных окон на чистом CSS.

Первый с использованием HTML-элемента <details>, второй с флажком <input type="checkbox">, а третий с псевдоклассом :target

Вариант с использованием HTML-элемента `<details>`

В этом примере каждая кнопка открывает одно конкретное всплывающее окно, расположенное под ней.

Закрытие окна происходит по клику вне его области, а крестик показывается как декорация.

Пример:

HTML:

<div class="css-modal-details">	
	<details>
		<summary>Название кнопки</summary>
		<div class="cmc">
			<div class="cmt">
				<p>Текст в модальном окне</p>		
			</div>
		</div>
	</details>
</div>

<summary>Название кнопки</summary>

<p>Текст в модальном окне</p>

</div>

</details>

</div>

CSS:

/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */
.css-modal-details {
	height: 60px;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Кнопка для открытия */
.css-modal-details summary {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;	
}
.css-modal-details summary:hover,
.css-modal-details summary:active,
.css-modal-details summary:focus {
	color: #FFF;
}
.css-modal-details summary:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-top: 50px solid #2D6B9F;
	transition: transform 0.5s;
	transform: translateX(-100%);
	z-index: -1;
}
.css-modal-details summary:hover:before,
.css-modal-details summary:active:before,
.css-modal-details summary:focus:before {
	transform: translateX(0);
}

/* Кнопка при открытом окне переходит на весь экран */
.css-modal-details details[open] summary {
	cursor: default;
	opacity: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}

/* Контейнер, который затемняет страницу */
.css-modal-details details .cmc {
	display:flex;
	align-items:center;
	justify-content:center;	
}
.css-modal-details details[open] .cmc {
	pointer-events: none;
	z-index: 4;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	animation: bg 0.5s ease;
	background: rgba(51, 122, 183, 0.7);
}

/* Модальное окно */
.css-modal-details details .cmt {
	font-family: Verdana, sans-serif;  
	font-size: 16px;
	padding: 20px;
	width:80%;
	max-width: 600px;
	max-height: 70%;
	transition: 0.5s;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	background: #FFF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	text-align: center;
	overflow: auto;
}
.css-modal-details details[open] .cmt {
	animation: scale 0.5s ease;
	z-index: 4;
	pointer-events: auto;
}

/* Декоративная кнопка с крестиком */
.css-modal-details details[open] .cmc:after {
	content: "";
	width: 50px;
	height: 50px;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	position: absolute;
	z-index: 10;
	top: 20px;
	right: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
	background-color: #FFF;
	background-size: cover;
	animation: move 0.5s ease;
}

/* Анимации */
@keyframes scale {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes move {
	0% {
		right: -80px;
	}
	100% {
		right: 20px;
	}
}
@keyframes bg {
	0% {
		background: rgba(51, 122, 183, 0);
	}
	100% {
		background: rgba(51, 122, 183, 0.7);
	}
}

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

146

/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */

.css-modal-details {

height: 60px;

display:flex;

align-items:center;

justify-content:center;

}

/* Кнопка для открытия */

.css-modal-details summary {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

overflow: hidden;

z-index: 1;

}

.css-modal-details summary:hover,

.css-modal-details summary:active,

.css-modal-details summary:focus {

color: #FFF;

}

.css-modal-details summary:before {

content: '';

position: absolute;

top: 0;

right: -50px;

bottom: 0;

left: 0;

border-right: 50px solid transparent;

border-top: 50px solid #2D6B9F;

transition: transform 0.5s;

transform: translateX(-100%);

z-index: -1;

}

.css-modal-details summary:hover:before,

.css-modal-details summary:active:before,

.css-modal-details summary:focus:before {

transform: translateX(0);

}

/* Кнопка при открытом окне переходит на весь экран */

.css-modal-details details[open] summary {

cursor: default;

opacity: 0;

position: fixed;

left: 0;

top: 0;

z-index: 3;

width: 100%;

height: 100%;

}

/* Контейнер, который затемняет страницу */

.css-modal-details details .cmc {

display:flex;

align-items:center;

justify-content:center;

}

.css-modal-details details[open] .cmc {

pointer-events: none;

z-index: 4;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

animation: bg 0.5s ease;

background: rgba(51, 122, 183, 0.7);

}

/* Модальное окно */

.css-modal-details details .cmt {

font-family: Verdana, sans-serif;

font-size: 16px;

padding: 20px;

width:80%;

max-width: 600px;

max-height: 70%;

transition: 0.5s;

border: 6px solid #BFE2FF;

border-radius: 12px;

background: #FFF;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

text-align: center;

overflow: auto;

}

.css-modal-details details[open] .cmt {

animation: scale 0.5s ease;

z-index: 4;

pointer-events: auto;

}

/* Декоративная кнопка с крестиком */

.css-modal-details details[open] .cmc:after {

content: "";

width: 50px;

height: 50px;

border: 6px solid #BFE2FF;

border-radius: 12px;

position: absolute;

z-index: 10;

top: 20px;

right: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");

background-color: #FFF;

background-size: cover;

animation: move 0.5s ease;

}

/* Анимации */

@keyframes scale {

0% {

transform: scale(0);

}

100% {

transform: scale(1);

}

@keyframes move {

0% {

right: -80px;

}

100% {

right: 20px;

}

@keyframes bg {

0% {

background: rgba(51, 122, 183, 0);

}

100% {

background: rgba(51, 122, 183, 0.7);

}

Вариант с использованием флажка `<input type="checkbox">`

В этом примере одно модальное окно может открываться любым количеством кнопок и располагаться где угодно, например, в подвале.

Закрытие окна происходит по клику на крестик.

Пример:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

HTML:

<!-- Кнопка -->	
<div class="css-modal-checkbox-container">
	<label for="css-modal-checkbox" class="css-modal-checkbox">Название кнопки</label>
</div>

<!-- Модальное окно -->	
<input type="checkbox" id="css-modal-checkbox" />	
<div class="cmc">
    <div class="cmt">
		<p>Текст в модальном окне</p>
	</div>
	<label for="css-modal-checkbox" class="css-modal-close"></label>
</div>

<label for="css-modal-checkbox" class="css-modal-checkbox">Название кнопки</label>

</div>

<p>Текст в модальном окне</p>

</div>

</div>

CSS:

/* Контейнер для кнопки */
.css-modal-checkbox-container {
	height: 60px;
	display:flex;
	align-items:center;
	justify-content:center;
}
/* Убираем флажок */
#css-modal-checkbox {
	display: none;
}
/* Кнопка для открытия */
.css-modal-checkbox {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;	
}
.css-modal-checkbox:hover,
.css-modal-checkbox:active,
.css-modal-checkbox:focus {
	color: #FFF;
}
.css-modal-checkbox:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-top: 50px solid #2D6B9F;
	transition: transform 0.5s;
	transform: translateX(-100%);
	z-index: -1;
}
.css-modal-checkbox:hover:before,
.css-modal-checkbox:active:before,
.css-modal-checkbox:focus:before {
	transform: translateX(0);
}

/* Контейнер, который затемняет страницу */
#css-modal-checkbox + .cmc {
    display: none;
}
#css-modal-checkbox:checked + .cmc {
	display:flex;
	align-items:center;
	justify-content:center;	
	z-index: 4;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	animation: bg 0.5s ease;
	background: rgba(51, 122, 183, 0.7);
}

/* Модальное окно */
#css-modal-checkbox:checked + .cmc .cmt {
	font-family: Verdana, sans-serif;  
	font-size: 16px;
	padding: 20px;
	width:80%;
	max-width: 600px;
	max-height: 70%;
	transition: 0.5s;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	background: #FFF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	text-align: center;
	overflow: auto;
	animation: scale 0.5s ease;
}
/* Кнопка с крестиком закрывающая окно */
.css-modal-close {
	width: 50px;
	height: 50px;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	position: absolute;
	z-index: 10;
	top: 20px;
	right: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
	background-color: #FFF;
	background-size: cover;
	animation: move 0.5s ease;
	cursor: pointer;
}

/* Анимации */
@keyframes scale {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes move {
	0% {
		right: -80px;
	}
	100% {
		right: 20px;
	}
}
@keyframes bg {
	0% {
		background: rgba(51, 122, 183, 0);
	}
	100% {
		background: rgba(51, 122, 183, 0.7);
	}
}

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

/* Контейнер для кнопки */

.css-modal-checkbox-container {

height: 60px;

display:flex;

align-items:center;

justify-content:center;

}

/* Убираем флажок */

#css-modal-checkbox {

display: none;

}

/* Кнопка для открытия */

.css-modal-checkbox {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

overflow: hidden;

z-index: 1;

}

.css-modal-checkbox:hover,

.css-modal-checkbox:active,

.css-modal-checkbox:focus {

color: #FFF;

}

.css-modal-checkbox:before {

content: '';

position: absolute;

top: 0;

right: -50px;

bottom: 0;

left: 0;

border-right: 50px solid transparent;

border-top: 50px solid #2D6B9F;

transition: transform 0.5s;

transform: translateX(-100%);

z-index: -1;

}

.css-modal-checkbox:hover:before,

.css-modal-checkbox:active:before,

.css-modal-checkbox:focus:before {

transform: translateX(0);

}

/* Контейнер, который затемняет страницу */

#css-modal-checkbox + .cmc {

display: none;

}

#css-modal-checkbox:checked + .cmc {

display:flex;

align-items:center;

justify-content:center;

z-index: 4;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

animation: bg 0.5s ease;

background: rgba(51, 122, 183, 0.7);

}

/* Модальное окно */

#css-modal-checkbox:checked + .cmc .cmt {

font-family: Verdana, sans-serif;

font-size: 16px;

padding: 20px;

width:80%;

max-width: 600px;

max-height: 70%;

transition: 0.5s;

border: 6px solid #BFE2FF;

border-radius: 12px;

background: #FFF;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

text-align: center;

overflow: auto;

animation: scale 0.5s ease;

}

/* Кнопка с крестиком закрывающая окно */

.css-modal-close {

width: 50px;

height: 50px;

border: 6px solid #BFE2FF;

border-radius: 12px;

position: absolute;

z-index: 10;

top: 20px;

right: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

background-color: #FFF;

background-size: cover;

animation: move 0.5s ease;

cursor: pointer;

}

/* Анимации */

@keyframes scale {

0% {

transform: scale(0);

}

100% {

transform: scale(1);

}

@keyframes move {

0% {

right: -80px;

}

100% {

right: 20px;

}

@keyframes bg {

0% {

background: rgba(51, 122, 183, 0);

}

100% {

background: rgba(51, 122, 183, 0.7);

}

Вариант с использованием псевдокласса `:target`

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

Закрытие окна происходит кликом на ссылку с другим якорем.

Пример:

HTML:

<!-- Кнопка -->	
<div class="css-modal-target-container">
	<a class="css-modal-open" href="#css-modal-target">Название кнопки</a>
</div>

<!-- Модальное окно -->	
<div class="css-modal-target" id="css-modal-target">
    <div class="cmt">
		<p>Текст в модальном окне</p>
	</div>
	<a href="#close" class="css-modal-close"></a>	
</div>

<a class="css-modal-open" href="#css-modal-target">Название кнопки</a>

</div>

<p>Текст в модальном окне</p>

</div>

</div>

CSS:

/* Контейнер для кнопки */
.css-modal-target-container {
	height: 60px;
	display:flex;
	align-items:center;
	justify-content:center;
}
/* Кнопка для открытия */
.css-modal-open {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;	
}
.css-modal-open:hover,
.css-modal-open:active,
.css-modal-open:focus {
	color: #FFF;
}
.css-modal-open:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-top: 50px solid #2D6B9F;
	transition: transform 0.5s;
	transform: translateX(-100%);
	z-index: -1;
}
.css-modal-open:hover:before,
.css-modal-open:active:before,
.css-modal-open:focus:before {
	transform: translateX(0);
}

/* Контейнер, который затемняет страницу */
.css-modal-target {
    display: none;
}
.css-modal-target:target {
	display:flex;
	align-items:center;
	justify-content:center;	
	z-index: 4;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	animation: bg 0.5s ease;
	background: rgba(51, 122, 183, 0.7);
}

/* Модальное окно */
.css-modal-target .cmt {
	font-family: Verdana, sans-serif;  
	font-size: 16px;
	padding: 20px;
	width: 80%;
	z-index: 8;
	max-width: 600px;
	max-height: 70%;
	transition: 0.5s;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	background: #FFF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	text-align: center;
	overflow: auto;
	animation: scale 0.5s ease;
}

/* Кнопка с крестиком закрывающая окно */
.css-modal-close {
	position: relative;
	display: block;
}
.css-modal-close:after {
    content: "";
    width: 50px;
    height: 50px;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    position: fixed;
    z-index: 10;
    top: 20px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
}
.css-modal-close:before {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	content: "";
	cursor: default;
}

/* Анимации */
@keyframes scale {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes move {
	0% {
		right: -80px;
	}
	100% {
		right: 20px;
	}
}
@keyframes bg {
	0% {
		background: rgba(51, 122, 183, 0);
	}
	100% {
		background: rgba(51, 122, 183, 0.7);
	}
}

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

/* Контейнер для кнопки */

.css-modal-target-container {

height: 60px;

display:flex;

align-items:center;

justify-content:center;

}

/* Кнопка для открытия */

.css-modal-open {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

overflow: hidden;

z-index: 1;

}

.css-modal-open:hover,

.css-modal-open:active,

.css-modal-open:focus {

color: #FFF;

}

.css-modal-open:before {

content: '';

position: absolute;

top: 0;

right: -50px;

bottom: 0;

left: 0;

border-right: 50px solid transparent;

border-top: 50px solid #2D6B9F;

transition: transform 0.5s;

transform: translateX(-100%);

z-index: -1;

}

.css-modal-open:hover:before,

.css-modal-open:active:before,

.css-modal-open:focus:before {

transform: translateX(0);

}

/* Контейнер, который затемняет страницу */

.css-modal-target {

display: none;

}

.css-modal-target:target {

display:flex;

align-items:center;

justify-content:center;

z-index: 4;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

animation: bg 0.5s ease;

background: rgba(51, 122, 183, 0.7);

}

/* Модальное окно */

.css-modal-target .cmt {

font-family: Verdana, sans-serif;

font-size: 16px;

padding: 20px;

width: 80%;

z-index: 8;

max-width: 600px;

max-height: 70%;

transition: 0.5s;

border: 6px solid #BFE2FF;

border-radius: 12px;

background: #FFF;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

text-align: center;

overflow: auto;

animation: scale 0.5s ease;

}

/* Кнопка с крестиком закрывающая окно */

.css-modal-close {

position: relative;

display: block;

}

.css-modal-close:after {

content: "";

width: 50px;

height: 50px;

border: 6px solid #BFE2FF;

border-radius: 12px;

position: fixed;

z-index: 10;

top: 20px;

right: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

background-color: #FFF;

background-size: cover;

animation: move 0.5s ease;

}

.css-modal-close:before {

left: 0;

top: 0;

width: 100%;

height: 100%;

position: fixed;

content: "";

cursor: default;

}

/* Анимации */

@keyframes scale {

0% {

transform: scale(0);

}

100% {

transform: scale(1);

}

@keyframes move {

0% {

right: -80px;

}

100% {

right: 20px;

}

@keyframes bg {

0% {

background: rgba(51, 122, 183, 0);

}

100% {

background: rgba(51, 122, 183, 0.7);

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

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

Опубликовано: 01.08.2021 / Обновлено: 01.09.2022
Рубрики: Модальные окна
Метки: CSS, Авторское
30202 просмотра

Плагин jQuery animatedModal.js для создания анимированных полноэкранных модальных окон

Fancybox 3 с темой оформления

jQuery плагин Fancybox 3, его быстрое подключение, настройка и тема оформления

Простое модальное окно на JS

Создание простого анимированного модального окна на JS без использования плагинов

Добавить комментарий:

Ваш комментарий отправлен!

Павел: 10.11.2023 в 13:15

Здравствуйте! Это лучшее и рабочее решение модального окна! Но подскажите, как сделать, чтобы кнопка не встраивалась в верстку сайта, а была поверх, например, прилипшая сбоку или внизу, поверх всех слоев сайта.

Ответить
- Alexander: 13.11.2023 в 09:41
  
  Обычным позиционированием fixed
  
  Ответить
  - Павел: 17.11.2023 в 23:09
    
    Как развернуть эту кнопку на 90 градусов и прилепить справа экрана, если начинаю ее крутить, то стили и модальное окно затрагивают. Не пойму к чему прицепиться.
    
    Ответить
    - Alexander: 20.11.2023 в 10:49
      
      Например для варианта с target добавить так:
      
      .css-modal-target-container { transform: rotate(-90deg); position: fixed; bottom: 120px; right: -90px; }
      
      Ответить
СЕРГЕЙ: 16.04.2023 в 19:46

Люди добрые! Подскажите, как вместо кнопки оформить ссылку на текст?

Ответить
СЕРГЕЙ: 10.04.2023 в 23:55

Здравствуйте! А можно ли сделать так, чтобы окно открывалось при клике на текст с ссылкой? И на каждую ссылку отдельное окно?

Ответить
- Alexander: 11.04.2023 в 07:43
  
  А чем последний вариант не устраивает?
  
  Ответить
Серега: 23.03.2023 в 05:40

Добрый день, а почему весь контент страницы пролетает сверху модального окна? Как можно сделать чтобы форма оставалась на верху всего контента?

Ответить
- Alexander: 24.03.2023 в 06:25
  
  Попробуйте прибавить значение z-index
  
  Ответить
Алексей Ершов: 18.03.2023 в 15:17

Очень крутая работа. Взял себе. Спасибо.

Ответить
Сергей: 13.02.2023 в 07:54

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

Ответить
- Alexander: 13.02.2023 в 13:09
  
  Какой именно вариант не получается?
  
  Ответить
  - Сергей: 13.02.2023 в 13:53
    
    Спасибо, Alexander, что так быстро среагировали на вопрос.
    Уже разобрался, все работает.
    
    Ответить

izi4: 23.07.2022 в 19:14

Здравствуйте Уважаемые!
Скажите пожалуйста, как позиционировать крестик в окне из примера N#1?
/* Декоративная кнопка с крестиком */

Ответить

Alexander: 24.07.2022 в 12:38

Я так понимаю, вы хотите кнопку к окну подвинуть?
Можно так:
HTML

<div class="css-modal-details">	
	<details>
		<summary>Название кнопки</summary>
		<div class="cmc">
		<div class="cmt-wr">
			<div class="cmt">
				<p>Текст в модальном окне</p>					
			</div>
			<div class="cmt-btn"></div>	
		</div>	
		</div>
	</details>
</div>

CSS

/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */
.css-modal-details {
	height: 60px;
	display:flex;
	align-items:center;
	justify-content:center;
}
/* Кнопка для открытия */
.css-modal-details summary {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;	
}
.css-modal-details summary:hover,
.css-modal-details summary:active,
.css-modal-details summary:focus {
	color: #FFF;
}
.css-modal-details summary:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-top: 50px solid #2D6B9F;
	transition: transform 0.5s;
	transform: translateX(-100%);
	z-index: -1;
}
.css-modal-details summary:hover:before,
.css-modal-details summary:active:before,
.css-modal-details summary:focus:before {
	transform: translateX(0);
}
/* Кнопка при открытом окне переходит на весь экран */
.css-modal-details details[open] summary {
	cursor: default;
	opacity: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}
/* Контейнер, который затемняет страницу */
.css-modal-details details .cmc {
	display:flex;
	align-items:center;
	justify-content:center;	
}
.css-modal-details details[open] .cmc {
	pointer-events: none;
	z-index: 4;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	animation: bg 0.5s ease;
	background: rgba(51, 122, 183, 0.7);
	display: flex;
}
/* Модальное окно */
.css-modal-details details[open] .cmt-wr {
	display: flex;
	width: 100%;
	max-width: 600px;
	max-height: 70%;
	margin: 0 10px;
}
.css-modal-details details .cmt {
	font-family: Verdana, sans-serif;  
	font-size: 16px;
	padding: 20px;
	transition: 0.5s;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	background: #FFF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	text-align: center;
	overflow: auto;
}
.css-modal-details details[open] .cmt {
	animation: scale 0.5s ease;
	z-index: 4;
	pointer-events: auto;
	width: 100%;	
}
/* Декоративная кнопка с крестиком */
.css-modal-details details[open] .cmt-btn {
	content: "";
	width: 50px;
	height: 50px;
	border: 6px solid #BFE2FF;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
	background-color: #FFF;
	background-size: cover;
	animation: scale 0.5s ease;
	margin-left: 10px;
	flex: 0 0 50px;
}
/* Анимации */
@keyframes scale {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes bg {
	0% {
		background: rgba(51, 122, 183, 0);
	}
	100% {
		background: rgba(51, 122, 183, 0.7);
	}
}

На само окно надвинуть нельзя, потому что этот крестик ничего не закрывает на самом деле.

Ответить

Владимир: 23.11.2022 в 19:00

Хорошего дня! А кнопку закрытия эту, цвет поменять ей и т.д. можно? Вроде не глупый запихал форму туда неплохую оптимизировал, не могу понять че с ним делать и все тут. Хочется поменьше его сделать и цвет поменять.

Ответить
Владимир: 23.11.2022 в 19:05

Да уж стоит только написать сразу во всем разбираешься...

Ответить

Слава: 19.03.2022 в 19:48

Здравствуйте.
Скажите,есть решение выводить такое окно через 30 секунд на сайте автоматом?

Спасибо

Ответить
- Alexander: 19.03.2022 в 21:09
  
  Ниже в комментариях есть ответ
  
  Ответить
Mikhail: 18.02.2022 в 22:05

Как сделать модальное окно при входе с интервалом времени?

Ответить
- Alexander: 03.03.2022 в 06:27
  
  На JS через timeout
  
  Ответить
  - Miha Dm: 03.03.2022 в 08:00
    
    Alexander На JS через timeout
    
    Я приблизительно понимаю что js.
    Но если есть возможность опубликуйте статью что ли. Модальное окно по таймеру или как-то так. Перерыл весь инет, нет толковой статьи. И Вам прирост будет.
    
    Ответить
    - Alexander: 03.03.2022 в 17:34
      
      В выходные постараюсь написать, подробно и много вариантов.
      А в 2-х словах если, то если есть кнопка с id=elementID для открытия окна, то код:
      
      setTimeout(function () { document.getElementById('elementID').click(); }, 5000);
      
      откроет его через 5 секунд.
      Он просто по ней кликнет через это время
      
      Ответить
Дмитрий: 01.02.2022 в 13:56

Добры день!
Подскажите, пожалуйста как сделать чтобы работало при нажатии на кнопку с таким кодом:

<asp:ImageButton ID="user" runat="server" ImageUrl="~/img/user.png" CommandName="Select" Height="32px" Width="32px" />

Ответить
- Alexander: 01.02.2022 в 20:08
  
  Я asp не знаю...
  
  Ответить
  - Дмитрий: 01.02.2022 в 21:44
    
    А как выполнить SQL запрос в javascript
    
    Ответить
    - Alexander: 01.02.2022 в 21:49
      
      А какое это имеет отношение к модальным окнам?
      
      Ответить
      - Дмитрий: 01.02.2022 в 22:23
        
        Согласен )))
        
        Ответить
юрист: 29.12.2021 в 09:02

эти модальные окна с использованием HTML-элемента <details> на браузерах Interner Explorer ужасно выглядят. Даже ваши примеры. Сами гляньте.

Как то нельзя исправить? все же народ Interner Explorer - ом продолжают пользоваться.

Ответить
- юрист: 29.12.2021 в 09:04
  
  Internet Explorer - опечатка проскочила после корпоратива новогоднего
  
  Ответить
  - Alexander: 29.12.2021 в 10:19
    
    А им разве кто то пользуется?
    Сейчас поглядел статистику за месяц, MSIE - 22 человка из 32718
    
    Ответить
Алексей: 22.11.2021 в 15:48

Спасибо) Пусть даже и так просто, но зато без JS, как мне нужно) Как хорошо что есть люди, которые делятся своим кодом!

Ответить
Дмитрий: 23.09.2021 в 14:10

Подскажите, как открыть окно при нажатии на картинку?

Ответить
- Alexander: 23.09.2021 в 15:18
  
  Вместо "Название кнопки" вставить картинку и убрать/изменить стили кнопки
  
  Ответить
  - Дмитрий: 23.09.2021 в 16:00
    
    Спасибо!!!
    
    Ответить
Elen: 01.09.2021 в 18:37

Окно на чекбоксе тоже можно закрывать по клику в не его области, если сделать лейбл во весь экран под ним.

Ответить

Вариант с использованием HTML-элемента `<details>`

Пример:

HTML:

CSS:

Вариант с использованием флажка `<input type="checkbox">`

Пример:

HTML:

CSS:

Вариант с использованием псевдокласса `:target`

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии:

Вариант с использованием HTML-элемента <details>

Пример:

HTML:

CSS:

Вариант с использованием флажка <input type="checkbox">

Пример:

HTML:

CSS:

Вариант с использованием псевдокласса :target

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии:

Вариант с использованием HTML-элемента `<details>`

Вариант с использованием флажка `<input type="checkbox">`

Вариант с использованием псевдокласса `:target`