К модальным окнам можно относиться как к отличному способу приобрести дополнительное экранное место, привлечь внимание пользователя сайта, предложить ему выбор или предупредить об изменениях. Или как к грязному хаку, позволяющему навязать посетителю информацию, на которую он иначе не обратил бы внимания.

Это – крайние точки на линейке, которой измеряется наши взаимоотношения с пользователем сайта. В зависимости от привычек, личных предпочтений и способа сёрфинга по сети модальные окна могут быть для пользователя благословением или проклятием.

Модальные окна заставляют пользователя быстро переключить внимание с одной части сайта на другую, содержание которой иногда не соотносится с тем, что пользователь только что просматривал.

Если появление модального окна произошло автоматически или просто не было в явном виде инициировано пользователем, оно может дезориентировать и раздражать. Это позволяет обвинять модальные окна в назойливости и вторжении в частное пространство пользователя.

Кажется, что модальные окна не могут серьёзно помешать пользователю, пока они содержат простые и хорошо заметные элементы управления. Всегда можно нажать «крестик » в углу экрана, пробежаться по тексту или заполнить, наконец, эту форму регистрации.

Но представьте себе, что вы управляете браузером при помощи клавиатуры интернет-киоска, дисплея Брайля или устройства голосового ввода, а появившееся модальное окно не переместило фокус ввода на свою кнопку или поле, а оставило его где-то под собой, в остальном контенте сайта. Это приведёт сайт в негодность для использования на нашем устройстве.

И такие случаи происходят чаще, чем можно ожидать при современном развитии юзабилити-практик и средств тестирования.

Семантика кода способствует доступности сайта

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

Чтобы добиться этого, мы должны внимательно отнестись к семантике разметки. Это требование кажется простым, но, к сожалению, оно часто не выполняется. Представьте себе следующий код окна с кнопкой «Закрыть »:

X …

Элемент не имеет определённого смыслового значения в этом контексте. Конечно, его можно опознать как кнопку закрытия окна по визуальным признакам: символу «X » и изменению формы курсора. Но что, если с сайтом работает плохо видящий или незрячий человек?

Чтобы можно было переместить фокус ввода на данный , мы должны использовать атрибут tabindex . Кроме того, состояние, описываемое псевдо-селектором :focus , позволит идентифицировать его как активный элемент. Это сделает управление сайтом при помощи альтернативных устройств возможным, но не слишком простым.

Допустим, что многие пользователи устройств чтения экрана уже знают о том, что буква «X » означает «Закрыть ». Но если мы заменим эту букву на знак умножения (амперсанд-код ×) или крест (❌) ради визуального эффекта, содержимое нашего блока не будет прочитано.

Лучшим решением в данной ситуации будет использовать тэг для обозначения активного элемента, а также добавить в разметку свойство aria-label , специально предназначенное для устройств чтения экрана:

X

Заменив на , мы значительно улучшили семантику нашего элемента управления. Теперь кнопка ведёт себя полностью предсказуемо: на неё можно переместить фокус при помощи клавиши табуляции, и контекст её использования теперь понятен всем.

Это лишь один небольшой пример того, как семантическая разметка упрощает пользование сайтом. Мы должны всесторонне внедрять семантический веб, чтобы создавать сайты, удобные для всех.

Делаем модальные окна удобными и доступными

Семантическая разметка поможет нам сделать наше модальное окно более удобным и доступным. А правильное использование стилей и скриптов поднимет юзабилити нашего сайта на новый уровень!

Добавление состояния:focus

Используйте состояние :focus в ваших стилях. Это улучшит не только модальные окна, но и всё управление сайтом. Часто состояние :focus , используемое браузером по умолчанию, переписывается css-reset -стилями, или само по себе недостаточно выделяет активные элементы, или не вписывается в общее оформление сайта.

Допустим вариант, когда вы объединяете состояния :focus и :hover :

Btn:hover, .btn:focus { background: #f00; }

Хотя, получение фокуса с клавиатуры и наведение указателя мыши – это всё же два различных состояния, и разумно будет дать им собственные, отличные от других стили:

Btn:hover { background: #f00; } :focus { box-shadow: 0 0 3px rgba(0,0,0,.75); }

Каждый элемент, способный получить фокус, должен быть стилизован таким образом. В крайнем случае, если вы не хотите использовать свой стиль :focus , позаботьтесь о том, чтобы сохранить дефолтный стиль браузера – обычно это пунктирное подчёркивание или рамка вокруг активного элемента, имеющего фокус.

Сохранение последнего активного элемента

При открытии модального окна и перемещении фокуса необходимо сохранять предыдущий активный элемент. Тогда при закрытии модального окна пользователь сможет продолжить своё взаимодействие с сайтом на том же месте, на котором модальное окно заставило его прерваться.

Это работает как подобие закладки. Без такой функции пользователь переместится к началу страницы, и будет вынужден искать нужный ему контент заново, что обескураживает. Проблему сохранения фокуса может решить вот такой скрипт:

var lastFocus; function modalShow () { lastFocus = document.activeElement; } function modalClose () { lastFocus.focus(); // place focus on the saved element }

Перемещение фокуса

При появлении модального окна фокус должен переместиться на него или на первый интерактивный элемент в нём. Тогда пользователю не придётся браться за мышь или перебирать клавишей “Tab ” десятки полей и кнопок:

На полный экран

Если ваше модальное окно занимает весь экран, позаботьтесь о том, чтобы элементы управления в основном окне стали на время недоступны. Иначе любой пользователь может продолжить вводить что-то в основное окно, думая при этом, что взаимодействует с модальным. Обеспечить желаемое может скрипт, подобный этому:

function focusRestrict (event) { document.addEventListener("focus", function(event) { if (modalOpen && !modal.contains(event.target)) { event.stopPropagation(); modal.focus(); } }, true); }

Закрывая для пользователя основной экран, мы всё же должны обеспечить для него доступ к элементам управления браузером при помощи всё той же кнопки “Tab ”. Такого поведения от нашего окна ожидают и обычные, зрячие пользователи.

Вышеприведённый скрипт предотвращает переход фокуса в основной документ, вместо этого перемещая его обратно к первому элементу модального окна.

Если мы заодно поместим модальное окно в вершину дерева DOM , сделав его первым потомком , то комбинация “Shift”+“Tab ” позволит пользователю переключить фокус на элементы управления браузером:

var m = document.getElementById("modal_window"), p = document.getElementById("page"); // должен окружать всю страницу, чтобы можно было применить // aria-hidden="true" к главному контенту при открытии модального окна. function swap () { p.parentNode.insertBefore(m, p); } swap();

Если вы не можете ни выбрать верхнюю позицию для блока модального окна заранее, ни переместить его в начало дерева при помощи JavaScript , вы можете зациклить перемещение фокуса между первым и последним активным элементом в модальном окне.

Для этого необходимо сохранять в скрипте их идентификаторы. Когда пользователь нажмёт “Tab” в последнем элементе окна, вы переместите фокус на первый элемент. Нажатие “Shift”+“Tab ” должно обрабатываться зеркально.

Есть и другие варианты обработки перемещения фокуса. Например, вы можете переназначать и использовать в скрипте списки элементов ввода, между которыми разрешён переход фокуса. Или устанавливать tabindex=-1 на скрываемые активные элементы.

Первый и второй методы делают меню и кнопки браузера недоступными при управлении с клавиатуры. При этом походе критичны хорошо заметный элемент закрытия окна и перехват нажатия клавиши “Esc ” с той же целью. Иначе ваш сайт станет ловушкой для пользователей без мыши.

Третий подход сохранит возможность навигации по элементам управления браузером, но может быть весьма накладным с точки зрения быстродействия скрипта, ведь ему придётся перебрать множество активных элементов на сайте, как при открытии модального окна, так и при его закрытии – чтобы вернуть всем элементам основного контента возможность быть выбранными.

Понятно, что при выборе конкретного метода вы должны учесть все рассмотренные нами факторы.

Закрытие

Модальное окно должно легко закрываться. Стандартные диалоги, вызываемые из JavaScript функцией alert() , могут быть закрыты нажатием клавиши “Esc ”. Будет хорошим тоном придерживаться этого соглашения при создании собственных диалогов.

Если диалог содержит много активных элементов, то гораздо лучше будет дать пользователю возможность закрыть его нажатием одной клавиши, нежели заставлять его пробегать по всем полям, чтобы добраться до кнопки «Закрыть »:

Кроме того, многие разработчики позволяют пользователям закрывать окно щелчком на его свободной области. Для этого можно использовать простой скрипт:

mOverlay.addEventListener("click", function(e) if (e.target == modal.parentNode) modalClose(e); } }, false);

Очевидным исключением из правил будет тот случай, когда вы действительно не хотите, чтобы посетитель продолжал пользоваться вашим сайтом, пока он не введёт нужную информацию в модальном диалоге, скажем, не зарегистрируется или не авторизуется.

Дополнительные меры по обеспечению доступности сайта

Существуют и другие способы помочь пользователям с ограниченными возможностями ориентироваться во Всемирной паутине. Спецификации WAI-ARIA покрывают все области взаимодействия пользователя с сайтом. В одних случаях достаточно немного дополнить разметку или стили, в других требуется оснастить сайт скриптами.

ARIA-HIDDEN

Устанавливая атрибуту aria-hidden значение true , вы можете скрывать содержимое элемента со всеми его дочерними элементами от программ, читающих экран. Необходимо учесть, что ARIA -элементы не обладают дефолтной стилизацией в браузерах. Чтобы скрыть их от зрячих пользователей, воспользуйтесь следующим CSS -кодом:

Modal-window { display: none; }

Обратите внимание на весьма специфичный селектор. В общем случае мы не хотим прятать абсолютно все элементы с aria-hidden=true. Вспомните предыдущий пример с кнопкой «X », чтобы понять, что имеется в виду.

ROLE=»DIALOG»

Добавьте свойство role=»dialog» ко всем элементам, содержащим модальный контент. Это укажет так называемым техническим средствам реабилитации, что данный контент требует реакции пользователя. Описанные нами скрипты, зацикливающие перемещение фокуса ввода между допустимыми активными элементами, отлично дополнят эту разметку.

Для оповещений, требующих от пользователя простого подтверждения, используйте role=»alertdialog» совместно с теми же скриптами.

ARIA-LABEL

Свойства aria-label и aria-labelledby используются совместно с role=»dialog» . Если ваше модальное окно имеет заголовок, укажите его идентификатор, например: aria-labelledby=modal_header_id . В противном случае задайте описание диалога в качестве значения свойства aria-label .

Как насчёт HTML5-диалогов?

На момент написания статьи Google Chrome версии 37 и ночные сборки Firefox уже научились поддерживать семантический элемент dialog .

Когда данный элемент станет общеупотребительным, это избавит нас от необходимости проставлять role=dialog в различных элементах. Пока же мы рекомендуем использовать role даже при наличии polyfill -библиотек для обеспечения поддержки устройств чтения экрана.

Замечательно то, что элемент dialog обладает не только семантическим значением, но и теми свойствами, которые могут заменить применяемые нами сегодня скрипты и стили.

Например, чтобы показать или спрятать диалог, мы обычно используем такой скрипт:

var modal = document.getElementById("myModal"), openModal = document.getElementById("btnOpen"), closeModal = document.getElementById("btnClose"); // для показа модального окна openModal.addEventListener("click", function(e) { modal.show(); // или modal.showModal(); }); // для закрытия модального окна closeModal.addEventListener("click", function(e) { modal.close(); });

Метод show() показывает диалог, вместе с тем оставляя пользователю доступ к остальному сайту. Метод showModal() запускает диалог и запрещает пользователю взаимодействовать с другими элементами сайта.

Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.

Куда вставить в DOM?

Обычно, я помещаю его перед закрывающим тэгом body.

В основном по причине стилей. Намного легче позиционировать модальное окно на CSS, когда вы имеете дело со слоем обертывающим весь body, чем с неизвестным набором родительских элементов, у которого потенциально может быть свое позиционирование.

Центрирование

Вот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.

Modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Это очень удобно так как, открытое модальное окно обычно должно находится прямо по центру, несмотря на ширину. Высота, тем более скорее всего изменится, так как она зависит от контента внутри.

Position – fixed?

Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.

Разберемся с шириной

На больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.

Modal { width: 600px; }

Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.

Modal { width: 600px; max-width: 100%; }

Высота

Задавать высотку еще более ответственное занятие. Мы знаем, что контент имеет свойство меняться. Плюс, техника центрирования через transform радостно обрезает края, без появления скролл-бара. Установка максимальной высоты обезопасит нас второй раз.

Modal { height: 400px; max-height: 100%; }

Overflow

После того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в.modal, однако, есть две проблемы с этим:

• Мы можем захотеть использовать элементы, которые не должны скролиться
• Overflow обрежет тень, которую мы будем использовать.

Я бы предложил использовать внутренний контейнер:

Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:

Modal-guts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* отступы */ padding: 20px 50px 20px 20px; /* разрешим скролить */ overflow: auto; }

Кнопки

Идея использования модальных окон в том, чтобы принудить выполнить какое-либо действие, перед тем, как что-нибудь будет сделано. Сделать кнопку закрытия окна видной в любом состоянии кажется не плохой идеей.

Закрыть

Разберемся с затемнением

Обычное модальное окно делают с полностью затемняющимся фоном. Это полезно по нескольким причинам:

• оно может затемнить остальной экран
• может предотвратить клики/взаимодействие с контентом вокруг модального окна
• может использоваться, как гигантская кнопка закрытия

Типичный пример использования:

.modal { /* все что мы уже выше описали */ z-index: 1010; } .modal-overlay { z-index: 1000; position: fixed; top:0; left:0; width: 100%; height: 100%; }

Закрывать классом, а не открывать классом

Я заметил распространенное явление, когда по умолчанию .modal класс скрыт, как например display: none; Потом, чтобы открыть, добавляют класс .modal.open {display: block;}

Однако, это может быть и плохо, потому что ваша модальное окно может быть display: flex; и display: block; его перепишет.

Modal { .display: flex; } .modal.closed { display: none; }

Добавим JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector("#open-button"); closeButton.addEventListner("click", function(){ modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); }); openButton.addEventListner("click", function(){ modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); });

Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.

В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью JQuery и CSS. Особенность данного примера в том, что тут не требуется , ну за исключением самой библиотеки JQuery.

Размещаем код модального окна на странице:

закрыть Открыть модальное окно

Как видно из разметки, блок самого модального окна это div c атрибутом id=modal_form , который содержит элемент span c id=modal_close . Этот элемент будет служить кнопкой для закрытия модального окна, кроме того, ниже блока расположен блок div с атрибутом id=overlay , который служит одновременно и для затемнения фона. Модальное окно будет открываться по ссылке, с классом modal .

CSS для модального окна

#modal_form { width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px; } #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #overlay { z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; height:100%; top:0; left:0; cursor:pointer; display:none; }

Для modal_form мы задали фиксированную ширину и высоту, а затем отцентрировали положение по центру экрана. Для подложки модального окна (overlay ) мы задаем размер по ширине экрана, заливку с прозрачностью, а так же прячем её по умолчанию. Особый момент с z-index , у модального окна он должен быть наибольшим из всех элементов на странице, а у обложки должен быть больше всех элементов, кроме самого модального окна.

Теперь к самому основному, это код на javascript. Для модального окна будет использоваться два основных события, это его открытие — клик по элементу с классом modal , в нашем случае это ссылка, и закрытие модального окна, это клик по обложке (overlay ), либо клик на кнопку закрыть, в нашем случае это элемент span с id=modal_close .

$(document).ready(function() { $(".modal").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(400, // анимируем показ обложки function(){ // далее показываем мод. окно $("#modal_form") .css("display", "block") .animate({opacity: 1, top: "50%"}, 200); }); }); // закрытие модального окна $("#modal_close, #overlay").click(function(){ $("#modal_form") .animate({opacity: 0, top: "45%"}, 200, // уменьшаем прозрачность function(){ // пoсле aнимaции $(this).css("display", "none"); // скрываем окно $("#overlay").fadeOut(400); // скрывaем пoдлoжку }); }); });

Посредством animate мы меняем позицию по вертикали top , а так же прозрачность opacity , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.

В статье о создание модального окна на css мы разобрали что такое модальное окно и зачем оно нужно. А так же создали окно используя только css. В этой статье я опишу как создать модальное окно javascript. А конкретнее мы будем для создания использовать библиотеку jquery.

И так начнём создавать модальное окно на jquery. Для усложнения задачи поставим такое условие. Нам нужно будет создать адаптивное модальное окно. А адаптивность будет заключаться в том, что окно при уменьшении размера экрана то же будет уменьшаться. Адаптивное модальное окно jquery начнём создавать с html разметки.

Жми здесь! X Заказать звонок

С кодом я думаю всё понятно. Имеем оболочку.wraper, где находится контент нашего сайта. Есть кнопка вызова модального окна с идентификаторм gowindow, само окно с ид modal_window и перекрывающий слой myoverlay. Напишем теперь css стили.

Wraper { width: 100%; margin: auto; width: auto;/*то же что и 100%*/ max-width: 960px;/*максимальная ширина обёртки*/ border: 1px solid #000; background-color: #F5F9FB; } .button{ /*-------*/ } #modal_window { width: 34%;/*для адаптивности*/ height: 300px; border-radius: 10px; border: 3px #fff solid; background: #e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; /*полная прозрачность для анимации */ z-index: 5000; /*окно должно быть верхним слоем*/ padding-top: 20px; text-align: center; position: relative; } #modal_window #window_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #myoverlay { z-index: 3000; /*выше всех слоёв но ниже окна */ position: fixed; /*для перекрытия сайта*/ background-color: #000; opacity: 0.5; width: 100%; height: 100%; /*полностью на экран */ top: 0; left: 0; cursor: pointer; display: none; }

Опишем css код. Блок.wraper задаём адаптивным, он меняется от размера экрана но не более 960px. Код кнопки показывать не буду. Ширину окна #modal_window задаём в процентах, ширина будет зависеть от ширины.wraper. Для центровки окна задаём марджин 33%. Он расчитывается так 50%-17%, где 17% половина ширины окна. Скрываем окно свойствами display: none и opacity: 0. С кодом #window_close и #myoverlay я думаю всё ясно. Давайте теперь напишем код для jquery. Будем считать что jqery уже подключена.

$(document).ready(function() { $("#gowindow").click(function(){//клик по кнопке $("#myoverlay").fadeIn(400, //показываем перекрывающий слой function(){ $("#modal_window") .css("display", "block") //делаем окно видимым.animate({opacity: 1, top: "50%"}, 200); //увеличиваем прозрачность, окно плавно съезжает }); }); /* убираем окно */ $("#window_close, #myoverlay").click(function(){ //нажатие по перекрывающему слою или кресту $("#modal_window") .animate({opacity: 0, top: "45%"}, 200, //вкл прозрачность, окно идёт вверх function(){ $(this).css("display", "none"); //делаем окно невидимым $("#myoverlay").fadeOut(400); //убираем слой перекрытие }); }); });

Js код я думаю в объяснении не нуждается, так как я его достаточно хорошо прокомментировал. На этом я думаю всё, так что подведём итоги. Мы сделали простое адаптивное модальное окно jquery

3. Пример модального окна jQuery, вызванного по ссылке (с Демо)

Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.

Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появляться
jQuery код

$(document).ready(function()
{
alert("Текст во всплывающем окне");
});

Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:

А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:

$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});

Вызов модального окна jQuery по ссылке с CSS Следующим шагом будет создание модального окна при нажатии по ссылке. Фон при этом будет медленно затемняться.

Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть . Этот код размещаем в body Вашего документа.

Вызов модального окна

Текст модального окна
Закрыть
Текст в модальном окне.

Код CSS . Либо в отдельном css-файле, либо в в head.

body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}

В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.

Внимание! Не забываем подключить библиотеку в head документа!

Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.

Код jQuery

$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});