Всплывающее окно при входе на сайт на CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

<div class="row pop-up">
<div class="box small-6 large-centered">
<a href="#" class="close-button">&#10006;</a>
<h3>Добро пожаловать</h3>
<p>Краткое описание</p>
<p>Полный текст в окне.</p>
<a href="#" class="button">Продолжить</a>
</div>
</div>

<h3>Добро пожаловать</h3>

<p>Краткое описание</p>

<p>Полный текст в окне.</p>

<a href="#" class="button">Продолжить</a>

</div>

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

Всплывающее окно при входе на сайт на CSS3

Шаг 2. CSS

Нам необходимо определить параметры контейнера, кроме этого мы стилизуем наш контейнер заливкой цвета, и добавлением кнопок. Мы добавили для фона размытие, ведь нам необходимо отвлечь внимание и приковать его к окну:

.cover {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}

.blur-in {
-webkit-animation: blur 2s forwards;
-moz-animation: blur 2s forwards;
-o-animation: blur 2s forwards;
animation: blur 2s forwards;
}

.blur-out {
-webkit-animation: blur-out 2s forwards;
-moz-animation: blur-out 2s forwards;
-o-animation: blur-out 2s forwards;
animation: blur-out 2s forwards;
}

@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}

100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}

@-moz-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}

100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}

@-o-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}

100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}

@keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}

100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}

@-webkit-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}

100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}

@-moz-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}

100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}

@-o-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}

100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}

@keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}

100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}

.content {
width: 650px;
margin: 0 auto;
padding-top: 100px;
}

span {
color: dimgray;
}

.pop-up {
position: fixed;
margin: 5% auto;
left: 0;
right: 0;
z-index: 2;
}

.box {
background-color: whitesmoke;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
position: relative;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}

.button {
margin 0 auto;
background-color: #FF8566;
margin-bottom: 33px;
}

.button:hover {
background-color: #7CCF29;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}

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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

.cover {

height: 100%;

width: 100%;

position: absolute;

z-index: 1;

}

.blur-in {

-webkit-animation: blur 2s forwards;

-moz-animation: blur 2s forwards;

-o-animation: blur 2s forwards;

animation: blur 2s forwards;

}

.blur-out {

-webkit-animation: blur-out 2s forwards;

-moz-animation: blur-out 2s forwards;

-o-animation: blur-out 2s forwards;

animation: blur-out 2s forwards;

}

@-webkit-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@-moz-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@-o-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@-webkit-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

@-moz-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

@-o-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

@keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

.content {

width: 650px;

margin: 0 auto;

padding-top: 100px;

}

span {

color: dimgray;

}

.pop-up {

position: fixed;

margin: 5% auto;

left: 0;

right: 0;

z-index: 2;

}

.box {

background-color: whitesmoke;

text-align: center;

margin-left: auto;

margin-right: auto;

margin-top: 10%;

position: relative;

-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

}

.button {

margin 0 auto;

background-color: #FF8566;

margin-bottom: 33px;

}

.button:hover {

background-color: #7CCF29;

-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

}

Шаг 3. JS

Последним шагом будет включение и отключение размытия, эту функцию мы реализуем с помощью простой функции js:

$(function() {
$('.pop-up').hide();
$('.pop-up').fadeIn(1000);
$('.close-button').click(function (e) {

$('.pop-up').fadeOut(700);
$('#overlay').removeClass('blur-in');
$('#overlay').addClass('blur-out');
e.stopPropagation();
});
});

$(function() {

$('.pop-up').hide();

$('.pop-up').fadeIn(1000);

$('.close-button').click(function (e) {

$('.pop-up').fadeOut(700);

$('#overlay').removeClass('blur-in');

$('#overlay').addClass('blur-out');

e.stopPropagation();

});

Всплывающее окно при входе на сайт на CSS3

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Всплывающее окно при входе на сайт на CSS3

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи