Вредоносное ПО (malware) - это назойливые или опасные программы,...
О которых было упомянуто выше.
Говоря о преимуществах можно выделить несколько ключевых:
- Легко настраиваемый внешний вид (в архиве вы найдёте 2 темы: по умолчанию и bootstrap);
- Красиво выезжающие Growl-like уведомления после отклика на alert-ы, которые можно использовать как обратную связь с пользователем;
- Использует только JavaScript возможности и не требует подключения сторонних библиотек;
- Кросс-браузерность;
- У alertify есть своя полная документация .
Достоинств уже достаточно на твердую четверку, плюс каждый отметит что-нибудь для себя. Меня же особо порадовали мини-уведомления, которые не всегда встретишь в готовых скриптах модальных окон. Ну и весит alertify совсем немного. Сейчас почти на любом сайте навешано множество сторонних скриптов и библиотек, таких как jQuery и MooTools, а это, зачастую, лишняя нагрузка на страницы.
Если вы, за время чтения вступления ещё не успели просмотреть примеры, которые я подготовил, то предлагаю изучить их и опробовать. На странице демо хорошо видно, как работает JavaScript всплывающих окон и его легкость в использовании. Мы же сейчас продолжим разбираться с alertify и, для начала, подключим сам плагин и его стили:
Скрипт добавим в конце страницы:
Теперь у нас появился новый объект Alertify, а чтобы увидеть его содержание предлагаю воспользоваться firebug-ом.
В этом объекте есть ещё два подобъекта, которыми мы и будем пользоваться для реализации наших модальных окон и уведомлений. В самом начале статьи я сказал, что данный скрипт самодостаточен и это так! К примеру, нам не нужно писать длинный вариант поиска элемента по id в DOM дереве – воспользуемся просто методом get(). Два других метода on() и off() как в jQuery, делают ровным счётом то же самое – навешивание событий на элементы или их удаление.
Теперь мы напишем вступительный кусок кода, в котором спрячем длинные обращения к методам и объектам:
Var d = Alertify.dialog, l = Alertify.log, $ = Alertify.get;
Вот так будет гораздо удобнее. В своих примерах я не буду пользоваться методом on(), а воспользуюсь onclick для наглядности. Добавим HTML разметку для нашего первого alert-а:
Alert Dialog
Воспользуемся плагином:
$("alert").onclick = function(){ d.alert("Текстовое сообщение в модальном окне alert"); return false; };
Для создания модального окна confirm() так же добавим HTML:
Confirm Dialog
И воспользуемся соответствующим кодом:
$("confirm").onclick = function(){ d.confirm("Текстовое сообщение в модальном окне confirm", function(){ // При нажатие на "OK" }, function(){ // При нажатие на "Cancel" }); return false; };
Остался у нас prompt(), добавляем HTML:
Prompt Dialog
И сам JavaScript код:
$("prompt").onclick = function(){ d.prompt("Текстовое сообщение в модальном окне prompt", function(str){ // При нажатие на "OK" // str - принимаемое значение в окне }, function(){ // При нажатие на "Cancel" }, "Значение по умолчанию"); return false; };
Как видите основные модальные окна, мы рассмотрели и вряд ли с ними могут возникнуть трудности, а теперь перейдем к уведомлениям. Собственно, уведомления реализованы через объект log. И тут несколько вариантов как использовать, первый обычное сообщение:
L.info("Обычное выдвижное сообщение");
Сообщение об успешном событии:
L.success("Успешное уведомление");
Об ошибке:
L.error("Произошла ошибка заполнение формы");
Вот мы и настроили красивые alert-ы и уведомления у себя в проекте. Надеюсь, данное решение вам пригодится в своей работе и практике, а на этом у меня всё.
У многих пользователей интернета термин «вплывающее окно » вызывает негативные ассоциации. Перед глазами сразу же «вплывает » картинка того, как при попытке просмотреть на сайте нужную информацию эта гадина закрывает нужный кусок текста. Что еще хуже, если пытаться закрыть его, пользователя зачастую вообще перекидывает на другой ресурс.
А такая ли гадина эти ваши всплывающие окна?Несмотря на такую дурную славу, всплывающие окна могут не только раздражать, но и приносить пользу. Изначально они являются лишь разновидностью диалоговых окон, применяемых в программировании как элементы пользовательского интерфейса.
Они служат для информирования и как средство диалога между пользователем и программой (веб-приложением ). Но, к сожалению, такое негативное отношение многих пользователей к всплывающим окнам во многом оправдано, потому что в сети они применяются в основном для рекламных целей.
- Открывающиеся на переднем плане (pop-up ) – всплывают поверх основного;
- Открывающиеся на заднем плане (pop-under ) – открываются за основным окном.
Последние являются самыми коварными. Они становятся активными и видными для пользователя лишь после закрытия основного. Поэтому определить их источник и вовремя блокировать не удастся.
Средства борьбыИз-за повсеместного применения всплывающих окон для нежелательной рекламы в интернете многие разработчики программного обеспечения начали встраивать в свои продукты средства борьбы с ними.
Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:
- Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
- Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
- Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.
В современных браузерах система блокировки всплывающих окон настраивается через пользовательский интерфейс. В Хроме , как и в большинстве других браузеров, реализованы возможность включения или отключения блокировки, а также составления списка исключений (доверенных сайтов ):
В веб-программировании для создания всплывающих окон используется несколько технологий. Основным средством их создания пока остается javascript . В его функционале имеется несколько видов диалогов, действие которых похоже на действие всплывающих окон:
- Метод alert() – выводит на экран обычное текстовое сообщение. Чтобы скрыть диалог после прочтения, нужно нажать на кнопку «Ok » внизу окна;
- Метод confirm() – подобен предыдущему методу. Но выводимый им диалог кроме «Ok » снабжен еще и кнопкой «Cancel ». С их помощью пользователь может принять или отказаться от условия, указанного в окне;
- Метод prompt() – служит для вызова еще одной разновидности всплывающего окна javascript . В отличие от упомянутых выше это окно снабжено еще и текстовым полем. В него пользователь может вводить текстовые данные, которые можно присвоить значению нужной переменной.
Действие всех трех методов и вызываемые ими разновидности диалога показаны на изображении:
Но это всего лишь разновидности диалогов. Для создания настоящего всплывающего окна в javascript используется метод open() объекта window .
Вот полный синтаксис метода:
win = window. open (url, name, params) , где:
- url – это адрес страницы, которая откроется в новом окне;
- Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
- Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.
На изображении ниже показано действие метода и приведен упрощенный скрипт всплывающего окна:
Создается функция f1 , в теле которой реализован вызов метода window. open() . Затем идет вызов этого метода с одним параметром, указывающим адрес страницы, которая откроется в созданном окне. После этого вызывается метод setTimeout() . В качестве параметров ему передается функция f1 и интервал времени, через который откроется новое окно.
Создание всплывающего окна с помощью CSSТакже можно создать всплывающее окно в CSS . Эта возможность была реализована лишь с выходом третьей версии этой технологии. Злоупотреблять этим вариантом не стоит, потому что он будет работать лишь в самых новых версиях браузеров:
Как видно из рисунка, такое модальное окно создано с помощью CSS и html . В отличие от созданных с помощью js это всплывающее окно не удастся передвигать по странице. К тому же его код слишком громоздок, чтобы описывать его в масштабах этой статьи. Но зато такое окно не будет блокироваться браузером.
Обзор остальных технологийСовсем не обязательно разрабатывать всплывающее окно самостоятельно. Сейчас для этого создано много бесплатных плагинов на jquery . Подключив один из них, вы получите готовое окно.
Также существует множество плагинов для популярных CMS . В их состав может входить целый набор окон. Дизайн и функционал каждого из них «заточен» под выполнение определенной задачи (регистрация, отправка сообщения и другое ).
Также существует несколько популярных скриптов. Пример одного из них будет приведен ниже. По такому принципу работают всплывающие окна в контакте и других популярных социальных сетях:
Как сделать всплывающее окно на Jquery
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#window-popup").show();
}
function PopUpHide(){
$("#window-popup").hide();
}
.box {
width: 400px;
height: 300px;
background-color: #ccc;
margin:0px auto;
padding:10px;
font-size:40px;
color: #fff;
}
.popup {
width:100%;
min-height:100%;
background-color: rgba(0,0,0,0.5);
overflow:hidden;
position:fixed;
top:0px;
}
.popup .popup-content {
margin:40px auto 0px auto;
width:200px;
height: 80px;
padding:10px;
background-color: #c5c5c5;
border-radius:5px;
box-shadow: 0px 0px 10px #000;
}
Пример всплывающего окна
Показать попап
Поздравляю вы сделали всплывающее окно!!! Скрыть попап
Код приведен в варианте «для ленивых ». Вставив его в любой редактор и запустив на выполнение, вы получите готовый пример всплывающего окна на основе jquery .
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)
Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.
Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появлятьсяjQuery код
$(document).ready(function()
{
alert("Текст во всплывающем окне");
});
Код вставляете в любое место в body
Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:
А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:
$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});
Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу
Для начала напишем html-часть . Этот код размещаем в body Вашего документа.
Вызов модального окна
Текст модального окна
Закрыть
Текст в модальном окне.
Код CSS . Либо в отдельном css-файле, либо в в head.
body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}
В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.
Внимание! Не забываем подключить библиотеку в head документа!
Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.
Код jQuery
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});
Приветствую, дорогие читатели блога. Сегодня хочу предложить вашему вниманию пошаговую инструкцию с конкретными примерами по созданию красивых окошек при входе на сайт. Попытаюсь расставить все по полочкам.
Первоначально следует понять, что всплывающие окна для сайта нужны для оповещения пользователя о какой-либо важной информации или же получения от него каких-либо данных. На многих современных сайтах, особенно в интернет-магазинах, можно найти небольшие развертывающиеся диалоговые блоки, в которых посетителю ресурса предлагают обратиться в службу поддержки или оценить качество работы проекта.
На некоторых форумах или блогах при входе появляется информационный блок, в котором человеку предлагают подписаться на новости портала, войти в систему или зарегистрироваться в ней. Кроме этого всплывающее окно на html может использоваться для преграждения деятельности пользователя до определенного момента, например, чтобы принудить его отключить блокировку рекламы или заставить зарегистрироваться в системе для продолжения просмотра.
Вариантов использования всплывающих блоков целое множество. В html не предусмотрен встроенный тэг для создания полноценного объекта с настройками анимации и параметров отображения. Однако при помощи языка разметки создается базовая конструкция, которая состоит из тэгов , , , .
Все действия и анимации прописываются в javascript коде, с использованием библиотеки jquery. Чтобы отличать блоки друг от друга к тэгам дописываются метки id="" и class= "" по ним в таблице стилей будут приписываться правила отображения. Вызов блока можно осуществлять по ссылке, при нажатии на кнопку или при первичной загрузке страницы. Эти действия программируются в javascript с использованием источника событий click или onclick.
Чтобы в дальнейшем не возникло вопросов о сокращениях:
- Jq- jquery;
- Js – javascript.
Всего в материале будут рассмотрены 4 примера с использованием разных методов, в том числе с использованием встроенной dialog UI функции в jq. Также имеется 2 варианта на чистом javavscript и html.
Виджет pop-up окна для WordpressНе всем владельцам блогов или магазинов хочется возиться с различными javascript кодами. Для популярных CMS, таким как wordpress, joomla, opencard и т. п. существуют встроенные плагины.
Наиболее популярные плагины wordpress для создания появляющегося окна:
- Contact Form Pop-up;
- Ninja Popup;
- Easy Modal;
- Promotions plugin;
- Ultimited Pop-Ups.
Для Joomla :
- JCE MediaBox;
- Simple Pop-Up
Существует еще целое множество подобных аналогов, но все они выполняют одинаковую функцию. Различается только дизайн меню, в котором работает пользователь.
Как сделать всплывающее окно html с разными стилямиДавайте рассмотрим основные примеры работы с разными способами создания окон и разберем каждый пошагово.
Всплывающее окно при входе на сайтПервоначально лучше рассмотреть пример с использованием html и javascript. Первоначально нужно подключить к странице библиотеку jq. Для этого используйте команду «команда 1» . Ее нужно вставить в самое начало файла, если не выполнить подключение к библиотеке, то нужные fadeIn, fadeOut и т. п. не заработают.
Первоначально создается тэговая конструкция страницы, которая в основном состоит из блоков div. В приведенном примере javascript выводит информацию из разных объектов, поэтому можно вписывать второй div, придав ему параметр iddiv= "box_" после нижнего подчеркивания указывается уникальное число.
div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окноТеперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.