Всплывающее окно для сайта

В данной статье я опишу процесс создания простого всплывающего окна с затемнением экрана с использованием чистого JavaScript (никаких библиотек), html и css.
Опишем последоватльность действий, которые будут на странице.

  1. Есть веб-страница с книпкой, при нажатии которой активируется скрипт
  2. Скрипт добавляет в DOM-модель документа (встраивает новый элемент структуру страницы) новый div с определенным стилем, а именно — размер на всю страницу, полупрозрачный, серого цвета, поверх всех элементов. Как вы уже догадались, это затемнение экрана.
  3. Далее скрипт меняет стиль отображения заранее подготовленного эелемента — нашего модального всплывающего «окна». Окно отображается фиксированно поверх слоя затемнения.

Собственно говоря, это вся логика работы. Теперь я приведу целиком весь код с комментариями.

<!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>Простое модальное окно</title> <style> .modalwin { height: 200px; width: 300px; border: 3px outset gray; background: wheat; top: 20%; /* отступ сверху */ right: 0; left: 0; font-size: 14px; margin: 0 auto; z-index:2; /* поверх всех */ display: none; /* сначала невидим */ position: fixed; /* фиксированное позиционирование, окно стабильно при прокрутке */ padding: 15px; border: 1px solid #383838; } #shadow { position: fixed; width:100%; height:100%; z-index:1; /* поверх всех кроме окна*/ background:#000; opacity: 0.5; /*прозрачность*/ left:0; top:0; } </style> <script type=»text/javascript»> function showModalWin() { var darkLayer = document.createElement(‘div’); // слой затемнения darkLayer.id = ‘shadow’; // id чтобы подхватить стиль document.body.appendChild(darkLayer); // включаем затемнение var modalWin = document.getElementById(‘popupWin’); // находим наше «окно» modalWin.style.display = ‘block’; // «включаем» его darkLayer.onclick = function () { // при клике на слой затемнения все исчезнет darkLayer.parentNode.removeChild(darkLayer); // удаляем затемнение modalWin.style.display = ‘none’; // делаем окно невидимым return false; }; } </script> </head> <body style=»text-align: center»> <h1> Веб-страница </h1> <form> <input type=»button» value=»Вызвать окно» onclick=»showModalWin()»> </form> <!— Наше модальное всплывающее окно —> <div style=»text-align: center» id=»popupWin» class=»modalwin»> <h2> Какая-то форма </h2> <form> <input value=»text»> <input type=»button» value=»OK»> </form> <hr> <h2> Какой-то текст </h2> <br> <p> УРа!!!!!!!!!! </p> <hr> </div> </body> </html>

Обратите в внимание на свойство z-index в css.

Оно весьма важно, так как определяет положение элемента относительно других, а именно наскольно элемент «близко» к пользователю, так называемая позиция на оси z, которая направлена на человека. По умолчанию это свойство равно 0, поэтому значение 1 для затемнения позволяет перекрыть все элементы, а значение 2 у «окна» выводит его на передний план.
Работать с «окном» можно также, как и с любым другим элементом на странице — например, встроить в него форму регистрации или что еще.
Ну вот и все, осталось только сохранить выше приведенный код в файл .html и открыть его в своем браузере. Удачи !!!

Всплывающее окно. Pop-up на jQuery.

На данный момент ни один современный, качественный сайт не может обойтись без использования JavaScript. Этот язык даёт очень многое, модифицирует и делает лучше любой проект. Но писать на чистом JS порой бывает трудно и долго. Для значительного облегчения объёма работы и времени потраченного на неё, была создана библиотека jQuery. Сегодня мы рассмотрим пример использования jQ, и сделаем всплывающее окно (довольно полезное и красивое дополнение к сайту).

Для начала напишем HTML код:

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

Собственно, вот и код:

Отлично! Красивая кнопка, приличный блок (pop-up окно) и пока что, бесполезный блок с затемнением. Осталось написать только небольшой кусок кода — и всё прекрасно!

Готово! Всё прекрасно работает, красиво на вид, и очень полезно! Результат работы можно посмотреть здесь: Pop-up окно на jQuery

Задавайте вопросы и высказывайте своё мнение в комментариях!

  • Создано 23.08.2017 08:00:00

  • Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

всплывающие окно

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

а по желанию нажимающего кнопку

код див окна

div span style= CURSOR: pointer

form input style= FONT-FAMILY: Monotype Corsiva BACKGROUND: none transparent scroll repeat 0% 0% COLOR: #000099 FONT-SIZE: 18px value= Новое окно type= button /form /span

Блог Костаневича Степана

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое#8230

Как сделать всплывающее окно на сайте

На сайтах, блогах или в интернет магазинах можно увидеть такой эффект, когда при нажатии на кнопку или ссылку затемняется веб-страница и появляются всплывающее окно с формой обратной связи или подпиской на курсы или с корзиной товаров и др. Сегодня мы попробуем что-то подобное сделать. Буду использовать HTML+CSS+Javascript.

Итак, есть два блока ( div ):  фон и само всплывающее окно с содержимым. Они скрыты, так как в CSS прописано свойство:

И когда мы нажимает на кнопку или ссылку, чтобы вызвать всплывающее окно, два блока( div ) появляются, так как в CSS свойство изменяется на:

display: block

Саму суть, я думаю, вы поняли.

Вставьте в HTML файл перед  /body вот такой код:

CSS стиль.

Сейчас блоки «wrap» и «window» находятся в скрытом состоянии:

display: none

Чтобы блоки появились после нажатия по ссылке, добавьте Javascript код перед тегом /head или перед тегом /body :

Всплывающее окно jQuery

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

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

Подготавливаем окно к всплытию.

Прежде чем углубляться в процесс реализации скрипта, нам необходимо создать наше всплывающее окошко, пока без анимации. Для этого создайте два файла windowstyle.css и window.html. а также нам потребуется директория для хранения картинок images. Скачайте свежую библиотеку jQuery и поместите её в одной папке со скриптом. Если вы не знаете, как это сделать, читайте статью посвященную знакомству с библиотекой jQuery.

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

Файл стилей windowstyle.css мы не будем рассматривать подробно, т.к. он очень большой и не обладает правом тратить наше время. Просто скачайте его вместе с необходимым набором картинок.

Перенесем картинки из содержимого архива в папку images. а также заменим наш windowstyle.css и продолжим подготовку. Для завершения церемонии приготовления, нам остается создать HTML код будущего всплывающего окна.

Вот таким должен получиться файл window.html

Источники: http://www.likiliks.ru/div.html, http://bloggood.ru/effekty-dlya-sajta-2/kak-sdelat-vsplyvayushhee-okno-na-sajte-2.html/, http://lifeexample.ru/jquery-javascript-primeryi/vsplyivayushhee-okno-jquery.html

Комментариев пока нет!

Что такое Popup/popunder партнерки?

С тех пор как Интернет появился практически в каждом доме, а количество коммерческих сайтов давно перевалило за миллион, мы можем наблюдать жестокую войну за клиентов, которую ведут между собой предприниматели в Сети.

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

В аспекте продвижения и раскрутки какого-либо продукта в Интернете Popup/popunder партнерские программы являются, с одной стороны, одними из наиболее показательных и информативных способов привлечения пользователей, а с другой стороны, отличаются назойливостью по отношению к посетителю страницы.

Pop-up реклама по своей сути является всплывающим окном, которое транслируется пользователю при просмотре сайта в отдельном окне браузера поверх активной страницы.

Такая реклама сегодня используется многими рекламодателями, так как имеет мощный визуальный посыл и характеризуется высокой кликабельностью. В большинстве случаев Pop-up блоки созданы с помощью Javascript.

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

Партнерская программа, работающая по принципу Pop-up или Pop-under, обычно оплачивает своим партнерам как сами клики по транслируемым рекламным блокам, так и клики, закрывающие данную страницу.

Таким образом, владельцы сайтов монетизируют свой трафик.

На сегодняшний день можно выделить пять Popup/popunder партнерских программ, которые пользуются популярностью среди веб-мастеров и владельцев популярных платформ Рунета:

1.Popupclick.ru;

2.Popuptraf.ru;

3.Kinotraff.ru;

4.Pop-under.ru;

5.1under.ru.

Вне зависимости от того, желаете ли вы участвовать в крупных партнерских программах такого типа, или вы отдаете предпочтение более молодым программам с интересными предложениями, постарайтесь предварительно узнать о данной партнерке как можно больше информации. В Интернете легко найти отзывы о том или ином сервисе, и если он регулярно «бросает» своих партнеров и не выплачивает вознаграждение, не рискуйте. Также  немаловажную роль играет здесь и внешний вид сайта партнерки, ведь чем лучше сделана платформа, тем платежеспособней ее владелец, а значит, данная программа настроена серьезно.

Конечно, у партнерских программ Popup/popunder существуют также и отрицательные стороны, так в последнее время все больше пользователей не реагируют на назойливую рекламу или просто блокируют ее с помощью своих браузеров. К тому же поисковые системы тоже пытаются бороться с подобными способами продвижения товаров и услуг, снижая ранжирование сайтов, которые используют такие инструменты влияния на пользователей Сети.

Тем не менее количество ресурсов, которые используют Popup/popunder не уменьшается, а это значит, что подобная реклама все же приносит ощутимый эффект рекламодателям и желаемый заработок самим участникам партнерской программы. Поэтому целесообразность участия в подобной партнерской программе – дело каждого, кому-то данный способ заработка подходит, а кому-то нет, все зависит от индивидуальных особенностей ресурса.

1. Создаём простое всплывающее модальное окно
2. Вызов модального окна jQuery по ссылке с CSS
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)

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

Создаём простое всплывающее модальное окно

Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появляться

Внимание! Напоминаю, что для работы с jQuery необходимо подключить саму библиотеку к странице или сайту. В противном случае ничего работать не будет.

jQuery код

<script type="text/javascript">
$(document).ready(function()
{
alert(‘Текст во всплывающем окне’);
});
</script>
Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:


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

<script type="text/javascript">
$(window).load(function()
{
alert(‘Загрузка страницы завершена!)’);
});
</script>

Вызов модального окна jQuery по ссылке с CSS

Следующим шагом будет создание модального окна при нажатии по ссылке. Фон при этом будет медленно затемняться.


Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть. Этот код размещаем в body Вашего документа.

<a href="#dialog" name="modal">Вызов модального окна</a>

<!— Само окно —>
<div id="boxes">  
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/>Закрыть</a></div>
<div class="content">Текст в модальном окне.</div>
</div>
</div>

<!— Маска, затемняющая фон —>
<div id="mask"></div>

Код CSS. Либо в отдельном css-файле, либо в <style> в head.

<style>
    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;
}
</style>
В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.

Внимание!

Не забываем подключить библиотеку в head документа!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Подключение библиотеки с сайта Google.

Ну и непосредственно сам код jQuery.

Код jQuery

<script>
$(document).ready(function() {   
    $(‘a[name=modal]’).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();
    }); 
   });  
</script>
Теперь можете посмотреть на работу скрипта!

ДемонстрацияСкачать исходники

Спасибо за внимание! Удачи в начинаниях!

 

Следующая статья
Как очистить код вставленный в WISYWIG редактор из MS Word?

Похожие статьи

Комментарии к статье (vk.com)

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

Закрыть меню