Предлагаем широкий спектр веб услуг по разработке,
поддержке и продвижению веб-сайтов.
Гарантируем качество и высокий уровень сдаваемых проектов.

Курсы валют ЦБ РФ, руб.
USD = 59.63
EURO = 70.36
GBP = 78.92
CAD = 46.72
100 JPY = 52.96
CNY = 89.87
AUD = 45.04
SGD = 43.95

Есть потребность создания pop-up окна или модального, как его еще называют. Решений много и все они сложные [подгружают кучу библиотек, скриптов и т.п.] либо занимают кучу времени на изменения внешнего вида - что тоже плохо.

На дворе 21 век и нет нужды подстраиваться под мамонтов или тех кто до сих пор пользуется IE 6, 7 версии или старыми Операми, Фоксами и т.д. Сайты нужно делать для современных людей и использовать современные технологии, если мы будем оглядываться назад и ровняться на прошлое - то далеко не уедим.

И так,

между <head> </head>

вставляем [если не работает без него или у вас на сайте нет использования библиотеки]

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

 

В 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: 5px solid #fff;
    border-radius: 15px; box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
    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   }
.popup-form__row { margin: 1em 0}
.popup__close {display: block; position: absolute;top: -20px;
    right: 10px;  width: 12px; height: 12px; padding: 8px;
    border: 5px solid #fff;  border-radius: 50%;
    -webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.5),
                              0 3px 3px     rgba(0,0,0,.5);
    box-shadow:         inset 0 2px 2px 2px rgba(0,0,0,.5),
                              0 3px 3px     rgba(0,0,0,.5);
    cursor: pointer; background: #fff; text-align: center;
    font-size: 12px; line-height: 12px; color: #333;
    text-decoration: none; font-weight: bold}
.popup__close:hover {background: #ddd}

 

В самом низу до закрытия </body>

вставляем скрипт


<script>
            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>

 

В нужном месте страницы, вставляем код самого pop-up окна

<p><input type="button" value="Popup окно!" id="popup__toggle" /></p>
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>Hello!</h2>
        <p>Текст текст текст в pop-up окне</p>
    </div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>


Всё!

Далее редактируйте стили и подгоняйте pop-up окно под свой шаблон.




скрыть

Есть вопросы или нужна консультация ?

Позвоните нам по тел. 8914-32-00-603