Главная
Web-дизайн
Модальное окно с помощью CSS и JavaScript

Модальное окно с помощью CSS и JavaScript

Доброго времени суток 🙂
Сегодня хочу показать, как можно сделать неплохое модальное окно с помощью CSS и JavaScript. У меня уже била статья о том как сделать такое окно только с CSS, но в том окне есть небольшой минус при его закрытии в адресной строке прописывается #close и это не всегда хорошо, потому как если эта страница использует функцию рассказать в соц сетях, то ссылка будет рабочая, но не совсем правильная.
В этом окне благодаря Java, это можно избежать.

Пример

И так приступим.

1.Html разметка

В нужное место на своем сайте добавляем кнопку.

 
<p><input type="button" value="Нажми" id="popup__toggle" /></p>

Потом вставляем код самого окна. В коде сразу прописан хак для ослика (Internet Explorer)

 
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <div class="popup__close">X</div>
        <h2>Окошко</h2>
        <p>Разместите тут текст или любую другую информацию, которая Вас интересует</p>
    </div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>

2.Стили CSS

В файл стилей прописываем стили, которые представлены ниже, по нужде подправляйте внешний вид окна, так как Вам угодно.

 
.popup__overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    text-align: center
    }
    .popup__overlay:after {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: ''
        }
/* Added for IE<9 compatibility */
.popup__overlay_ie {
        background: #000;
        opacity: .7;
        filter: alpha(opacity=70)
        }
.popup {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    max-width: 80%;
    padding: 20px;
    border-radius: 15px;
    border:3px solid #339900;
    background: #fff;
    vertical-align: middle
    }
/* Added instead of :after pseudoelement */
.popup__valignfix {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    height: 100%;
    vertical-align: middle
    }
input[type="button"] {
    padding: 6px 16px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    background: #ff6600;
    color: #fff
    }
.popup__close {
    display: block;
    position: absolute;
    top: -18px;
    right: 10px;
    width: 12px;
    height: 12px;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    background: #339900;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
	cursor:pointer;
    }
    .popup__close:hover {
     background: #ff6600
        }

3.Подключаем JavaScript и библиотеку jQuery

В подвале, перед закрывающимся body сначала подключаем библиотеку jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Потом сам скрипт вызова Модального окна.

<script type="text/javascript">
$(window).ready(function(){
p = $('.popup__overlay')
$('#popup__toggle').click(function() {
    p.css('display', 'block')
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})
});
</script>

Если все сделано правильно то у Вас должно получиться как в примере.

Пример

На этом все, спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(16 голосов, в среднем: 5 из 5)

Опубликовано 12 комментариев

  • Serj
    Комментариев: 2

    я пытался понять как подсоединить по посту http://gnatkovsky.com.ua/animirovannaya-knopka-obratnogo-zvonka.html

    есть какой нить пример как соединить именно с этой темой содержанием?

  • Павел
    Комментариев: 1

    автор , java и javascript - разные ЯП.

  • Андрей
    Комментариев: 1

    Полезная статья. А как сделать на одной странице несколько подряд кнопок с разными текстами кнопок и описанием в модальном окне?
    Можно и в почту код скинуть.

    • Виталий
      Комментариев: 269

      Каждой кнопке нужно прописывать свои уникальные классы и айди. Также каждой подключать отдельный скрипт в котором указать новые классы и айди.

      • Григорий
        Комментариев: 1

        Помимо классов и айди нужно в теле скрипта изменить имя для переменной "p". Например

        $(window).ready(function(){
        w = $('.wpopup__overlay')
        $('#whatsapp-mini').click(function() {
        w.css('display', 'block')
        })
        w.click(function(event) {
        e = event || window.event
        if (e.target == this) {
        $(w).css('display', 'none')
        }
        })
        $('.wpopup__close').click(function() {
        w.css('display', 'none')
        })
        });

        Здесь я изменил её на "w"

  • Андрей
    Комментариев: 2

    Здравствуйте,Виталий.Подскажите,пожалуйста,как решить вот такой конфликт.Работает анимационная кнопка,всплывает окно,но окно находится ниже моих установленных модулей.Вот какой параметр мне исправить?Уже как-то было такое дело с других окном,я там поправил данные Z( так понял,что это ось воображаемая).а в Ваших данных такого зэт нет.
    И еще,стоит у меня на главной странице слайдшоу модуль,вот когда я добавил вашу строку с jquery,то модуль отказался листать картинки.Я так понимаю,что это все из-за того,что у меня еще подключен один скрипт и находится он в самом начале данного файла.Вот как их сдружить,подскажите,пожалуйста?(в терминах могу ошибаться,новечек в этом деле).

    • Леонид
      Комментариев: 1

      Та же самая проблема, конфликт слайдшоу модуля и jquery, или кнопка или слайды.....подскажите как решили?

      • Виталий
        Комментариев: 269

        Не подключайте библиотеку с этой статьи, а вот скрипты подключите после той библиотеки, что у Вас подключена слайдером.

  • Андрей
    Комментариев: 2

    Добавил z-index и поднял выше всех окно.Один вопрос решен.А вот как конфликт модуля убрать,подскажите?

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий