- 15 Дек 2014г
- 9180
- 19
- Рубрика: Web-дизайн
Модальное окно с помощью 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
я пытался понять как подсоединить по посту http://gnatkovsky.com.ua/animirovannaya-knopka-obratnogo-zvonka.html
есть какой нить пример как соединить именно с этой темой содержанием?
Комментариев: 513
добрый день. Чтобы вызвать модальное окно используется id="popup__toggle"
А кнопка имеет - id="uptocall-mini"
Вот вам и надо в скриптах модального окна все заменить id="popup__toggle" на id="uptocall-mini"
Комментариев: 2
понял спасибо! полезная очень информация
Комментариев: 513
Рад, что помог)
Комментариев: 1
автор , java и javascript - разные ЯП.
Комментариев: 1
Полезная статья. А как сделать на одной странице несколько подряд кнопок с разными текстами кнопок и описанием в модальном окне?
Можно и в почту код скинуть.
Комментариев: 513
Каждой кнопке нужно прописывать свои уникальные классы и айди. Также каждой подключать отдельный скрипт в котором указать новые классы и айди.
Комментариев: 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"
Комментариев: 1
Огромное спасибо!!! Я весь мозг сломал, пока не увидел ваш пост, теперь все работает )))
Комментариев: 2
Здравствуйте,Виталий.Подскажите,пожалуйста,как решить вот такой конфликт.Работает анимационная кнопка,всплывает окно,но окно находится ниже моих установленных модулей.Вот какой параметр мне исправить?Уже как-то было такое дело с других окном,я там поправил данные Z( так понял,что это ось воображаемая).а в Ваших данных такого зэт нет.
И еще,стоит у меня на главной странице слайдшоу модуль,вот когда я добавил вашу строку с jquery,то модуль отказался листать картинки.Я так понимаю,что это все из-за того,что у меня еще подключен один скрипт и находится он в самом начале данного файла.Вот как их сдружить,подскажите,пожалуйста?(в терминах могу ошибаться,новечек в этом деле).
Комментариев: 1
Та же самая проблема, конфликт слайдшоу модуля и jquery, или кнопка или слайды.....подскажите как решили?
Комментариев: 513
Не подключайте библиотеку с этой статьи, а вот скрипты подключите после той библиотеки, что у Вас подключена слайдером.
Комментариев: 2
Добавил z-index и поднял выше всех окно.Один вопрос решен.А вот как конфликт модуля убрать,подскажите?
Комментариев: 5
як зробити та щоб модальне вікно не ховалось за слайдами? що і куда треба прописати?
Комментариев: 513
Додати z-index:9999; для .popup__overlay
або навіть 999999
Комментариев: 5
Добрий вечір! В мене тут така проблемка коли я нажимаю на будь який роділ в сайті в мене в першу чергу вискакує це модальне вікно.Що можна заробити? Щоб воно вискакувало тільки коли я на кнопку виклику натискаю
Комментариев: 513
Зробити все відповідно інструкції у статті. Скоріше за все, що зроблено не так.
Комментариев: 2
Подскажите пожалуйста, как сделать чтоб вся информация из модального окна попадала сообщением на почту???
Комментариев: 513
Здравствуйте. Добавить PHP обработчик. В этой статье есть пример похожего обработчика. http://gnatkovsky.com.ua/forma-otpravki-pisma-bez-perezagruzki-stranicy-dlya-lendinga.html