Модальные окна с помощью 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;
} 

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


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

Теги
1c addurl AutoGRAPH.NET_Service Bitrix Bootstrap chmail.ru CMS curl DLE ERP Exel gmail google hdd hide html input Java script окна javascript Jquery JS JSON keywords mail.ru memori news.list No captcha nsma PHP php php attach PR recaptcha repair retweet script Sdorgen sdorgen select sms snagit Spam Test Twitter ucoz utf-8 VK wrike X-Satellite XHE xhe yandex yandex webmaster youtube АРМ БП3 Битрикс ВТБ24 ЕГРЮЛ ЖЖ ЗУП ИТС КЛАДР МБ-8 НДФЛ ПР ПФ ТИЦ УАТ УП автограф автокликер автоматизация автопостер ап ТИЦ битрикс валюты видео внешнее соединение время грамотное написание графика даты запрета день рождение дерево значений договор заказы заполнение ТЧ запонение ТЧ запрос 1С зарплатный реестр календарь книги кодировка комментарии координаты координирование проектов меню модальное окно народ обмен обработка ок рубль организационные структуры управления проектами остатки на складе отчет плавающий блок постинг программы для управления проектами расчет расстояния сервис система управления проектами скрипт скрыть блок смс софт таймер такси управление содержанием проекта фоновые задания чекер