• 15 Дек 2014г
• 10703
• 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>

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

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