Показать Меню
falbar Всплывающие сообщения без JavaScript

Реализуем всплывающие сообщения без использования JavaScript

Всплывающие сообщения без JavaScript

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к javascript, а лишь воспользовавшись HTML и CSS3.

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

Начнем, пожалуй, с разметки:

<div class="notification-bar">
	<input id="hide" type="radio" name="bar" value="hide" />
	<input id="show" type="radio" name="bar" value="show" checked="checked" />
	<label for="hide">hide</label>
	<label for="show">show</label>
	<div class="notification-text">
		<!-- 

			Контент

		 -->
	</div>
</div>

Как видите, при добавлении HTML мы воспользовались маленькой хитростью. Так как мы делаем уведомления, используя лишь HTML и CSS, то мы не можем отследить фактически событие клика, но CSS позволяет нам определить состояние radio кнопки - именно используя эту возможность можно легко сэмитировать нужное нам состояние. Привязав наши кнопки к тегам <label>, мы можем указать нужную нам текстовку. Далее останется дело за стилями, которые мы будем использовать.

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

.notification-bar{
	position: absolute;
	width: 100%;
	top: 0;
}

Теперь нам необходимо спрятать radio кнопки:

.notification-bar input{
	display: none;
}

Контент, который будет информировать пользователя о новостях и событиях на сайте, мы поместим в блок с классом .notification-text и зададим ему стили:

.notification-text{
	background-color: #2980B9;
	padding: 15px 0;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;
	-webkit-animation: initiate 350ms ease;
	-moz-animation: initiate 350ms ease;
	-o-animation: initiate 350ms ease;
	animation: initiate 350ms ease;
}

Укажем CSS свойства для кнопок:

.notification-bar label{
	cursor: pointer;
	color: #fff;
	position: absolute;
	z-index: 5;
	display: inline-block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.notification-bar label[for=hide]{
	right: 15px;
	top: 11px;
	width: 24px;
	height: 24px;
	background: url(close.png) no-repeat center center;
	-webkit-animation: initiate 350ms ease;
	-moz-animation: initiate 350ms ease;
	-o-animation: initiate 350ms ease;
	animation: initiate 350ms ease;
}
.notification-bar label[for=show]{
	width: 45px;
	height: 50px;
	border-radius: 0px 0px 3px 3px;
	right: 10px;
	background: url(show.png) no-repeat center center #2980B9;
}

У кнопок есть общие правила: как и для каждого из состояний, когда сообщение спрятано, так и в случае, когда показывается. Если замарочиться и добавить немного JavaScript, а именно куку для отслеживания состояния, то при обновлении страницы пользователю не потребуется заново его скрывать. Но здесь мы рассмотрели, что можно сделать воспользовавшиеся лишь HTML и CSS.

Источник
hongkiat.com

Подписаться на обновления

Комментариев еще не оставлено