Делаем красивые модальные окна при помощи «Sweet Alert» плагина

11 октября 2014 Антон Кулешов 4770 0

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

Реклама

Как уже понятно из названия, мы будем пользоваться JavaScript плагином «Sweet Alert» в переводе на русский, что означает «Сладкие Оповещения». Живет этот плагин на сайте github.

Для того чтобы добавить модальные окна к себе на сайт необходимо подключить два файла.

<script src="sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweet-alert.css" />

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

swal({
	title: "Error!",
	text: "Here's my error message!",
	type: "error",
	confirmButtonText: "Cool"
});

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Прогресс бар как на YouTube

8 сентября 2015 Антон Кулешов

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

Всплывающие подсказки balloon CSS

8 июня 2016 Антон Кулешов

Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную CSS библиотечку для добавления всплывающих подсказок. Решений на эту тему есть уже масса, и я неоднократно добавлял к себе на сайт разные варианты, но увидев balloon решил о нём написать.

Набор русских шрифтов – верстайте и радуйтесь

20 октября 2015 Антон Кулешов

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