Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » Всплывающее окно jquery на сайте RSS
июл 21 2015 photo

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

Alessa Shtern 7 875
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Наша html разметка будет достаточно простой, это кнопка и само окошко:


<button>Нажми меня</button>
<div class="success">
Это всплывающее уведомление
</div>

В стилях мы скроем окошко свойством display: none и придадим остальным элементам красивый вид:


body {
    margin: 0;
    background: #CFCFCF;
    width: 100%;
}
button{
    border: 0;
    background: red;
    padding: 20px;
    color: #fff;
    text-transform: uppercase;
    margin: auto;
    cursor: pointer;
    transition: 1s ease;
    border-radius: 5px;
    margin-top: 100px;
    width: 300px;
    display: block;
    outline: none;
}
button:hover{
    background: #656565;
}
.success{
    display: none;
    position: fixed;
    padding: 20px 20px 20px 50px;
    background: rgba(246, 246, 246, 0.8);
    border-radius: 15px;
    z-index: 10;
    width: 340px;
    line-height: 20px;
}
.success::before{
    content: "✓";
    font-size: 30px;
    font-family: sarif;
    float: left;
    display: block;
    line-height: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-weight: 600;
    color: rgb(0, 201, 169);
    margin-right: 20px;
    position: absolute;
    top: 0;
    left: 0;
}
.close {
    margin-left: 10px;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

Выше описаны стили как для всплывающего окна, так и для самой кнопки и тела сайта.

А теперь самое важное. Это наш небольшой код скрипта:

jQuery(function($) {
$('button').click(function(){
            $('.success').append('<div class="close">☓</div>');
            $('.success').fadeIn('slow');
            $('.success').css('top',($(window).height()-$('.success').outerHeight())/2 + 'px');
            $('.success').css('left',($(window).width()-$('.success').outerWidth())/2 + 'px');
            function windowClose(){
                $('.success').fadeOut('slow');
            };
            setTimeout(function(){windowClose()}, 4000);
            $('.close').click(function(){
                windowClose();
            });
        }); 
});

Немного поясню. Наши всплывающие окна появляются по центру экрана при нажатии на кнопку button. При клике нашему html коду добавляется кнопка Close, при клике по которой пользователь может сразу закрыть всплывающее окно (за это отвечает функция windowClose()). Далее мы инициализируем плавное появление и выравниваем наше всплывающее окно по центру экрана и ставим таймаут на его исчезновение 4 секунды (в скрипте это прописано как 4000 миллисекунд). После чего наше всплывающее окно плавно исчезает. 

ДЕМО

Теги: jQuery всплывающее окно

HashFlare
Другие новости по теме:
  • Фиксированное меню при прокрутке страницы
  • Мобильное меню для сайта
  • Красивое вертикальное меню на CSS
  • Всплывающие подсказки при помощи jQuery qTip
  • Горизонтальное меню на CSS

Комментарии к: Всплывающее окно jquery на сайте (4)

    1. №1  Руслан 02-03-2016 Цитировать
      очень помогло спасибо!
    1. №2  tmcold 03-06-2016 Цитировать
      Подскажите, jQuery вставляем в какой файл?
      в common.js?
    1. №3  Дмитрий 17-03-2017 Цитировать

      что круто-решение кроссбраузерное, фон модалки тока в Эксплорере 8 не отображается.

      автору-спасибо

    1. №4  AGr0 20-04-2018 Цитировать

      Плохо, что окно не закрывается по клику вне его, это обычная практика

Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Фиксированное меню при прокрутке страницы
  • Мобильное меню для сайта
  • Красивое вертикальное меню на CSS
  • Всплывающие подсказки при помощи jQuery qTip
  • Горизонтальное меню на CSS
  • Популярное
  • Авторизация
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015