Модальные окна с помощью JQuery

Возврат к списку

Модальное Окно.jpg

В сегодняшнем уроке, мы будем конструировать всплывающие окна с помощью библиотеки JQuery. В интернете уже большое количество плагинов, с помощью которых можно конструировать всплывающие окна, но они часто конфликтуют с приложениями, которые уже работают на сайте. Итак, в первую очередь нужно подключить библиотеку JQuery. Можно скачать её с официального сайта, либо использовать библиотеку от Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
 Пописываем функции, которые будут обрабатывать действия:
<script type="text/javascript">
    $(document).ready(function () {

//Если мы кликаем по ссылке с классом  poplight и href начинается с  with a #
        $('a.poplight[href^=#]').click(function () {
            var popID = $(this).attr('rel');
            var popURL = $(this).attr('href');

            var query = popURL.split('?');
            var dim = query[1].split('&');
            var popWidth = dim[0].split('=')[1];

            $('#' + popID).fadeIn().css({'width': Number(popWidth)}).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

            //Определяем отступы
            var popMargTop = ($('#' + popID).height() + 80) / 2;
            var popMargLeft = ($('#' + popID).width() + 80) / 2;

            $('#' + popID).css({
                'margin-top': -popMargTop,
                'margin-left': -popMargLeft
            });

            $('body').append('<div id="fade"></div>');
            $('#fade').css({'filter': 'alpha(opacity=80)'}).fadeIn();

            return false;
        });

//Закрываем форму
        $('a.close, #fade').live('click', function () {
            $('#fade , .popup_block').fadeOut(function () {
                $('#fade, a.close').remove();
            });
            return false;
        });
    });
</script>
 Пример html ссылки:
<a href="#?w=600" rel="popup_name" class="poplight">Модальное окно</a>

#?w=600 – отвечает за ширину (в пикселях) всплывающего окна. Изменять значение мы можем как нам угодно; rel – обозначаем в коде ссылки, какое окно должно «всплыть», при нажатии на нее. Название должно соответствовать id нижеуказанного дива; class – говорим браузеру, что дальше будет работать jQuery.

Html всплывающий блок:
<div id="popup_name" class="popup_block"> <h2>Модальное окно</h2> <p>Текст парам пам пам.... </p> </div>
CSS оформление всплывающего окна:
#fade { /*--Transparent background layer--*/
      display: none; /*--hidden by default--*/
      background: #000;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: .80;
      z-index: 9999;
  }

.popup_block {
    display: none; /*--hidden by default--*/
    background: #fff;
    padding: 20px;
    border: 20px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999; /*--CSS3 Box Shadows--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000; /*--CSS3 Rounded Corners--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

img.btn_close {
    float: right;
    margin: -55px -55px 0 0;
}

/*--Making IE6 Understand Fixed Positioning--*/
* html #fade {
    position: absolute;
}

* html .popup_block {
    position: absolute;
} 

Спонсор поста: светодиодная реклама - эффективная реклама.


Возврат к списку