Jquery ui dialog — Кто как использует?

Question

[Владимир Коровин]

В проекте используется достаточно много диалоговых окон, и везде представляю окно как div, скрытый изначально, который при определенном событии становится диалогом. А сейчас смотрю на шаблоны страниц (использую Smarty) и все больше подумываю о том, что размер страницы можно уменьшить вдвое, убрав скрытые диалоги и перенеся их создание в js. Гуру, подскажите, как более грамотно создавать диалоговые окна?

Answer 1

[Артур Кох]

$(document)
.on("click", "#openModal", function() {
     $("body").append('<div id="shadow" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5;"></div>').append('<div id="modal"><button id="closeModal">Close Modal</button></div>');
     $("#modal").load("file.html");
})
.on("click", "#closeModal", function() {
     $("#modal").remove(); 
     $("#shadow").remove();
})

Для #modal указать необходимые стили и абсолютное позиционирование.

Comments

[Артур Кох]

Хотя для #shadow можно указать position:fixed; либо overflow:hidden для body при открытии модального окна.

[Артур Кох]

Ну и писал пример с ходу.
Это $("#modal").load(«file.html»); затрёт кнопку Close Modal, но суть, думаю, передал

[Владимир Коровин]

Да, передали. Но Вы для себя решили однозначно, что если js отключен, то пользователь не получит определенный функционал. Хотя, если click повесить на ссылку на страницу, а при помощи js перехватывать событие, то и так и так функционал обеспечен. Т.е. вместо file.html надо бы получить href у openModal.

[Артур Кох]

Тут уже вопрос задачи. При отключенном js, да — отправлять на необходимую страницу с аналогичным функционалом по атрибуту href.
Хотя мифически пользователь с отключенным JS это даже смешнее поддержки IE6 :)

Answer 2

[Богдан Горбешко]

Если содержимое диалога довольно динамично и его структура не очень сложна — лучше генерить через js, если он неодноразовый и статичный — можно и скрытым сделать. Тут надо в каждом конкретном случае смотреть.

Answer 3

[Денис Инешин]

Можно делать даже лучше. Например генерировать на JS при первом обращении, в дальнейшем скрывать/проявлять по мере необходимости. Это исключит постоянные манипуляции с DOM и код страницы останется чистым.
Либо для еще большего ускорения генерировать контейнер модального окна заранее, скажем в момент DOM-ready. А потом уже использовать, пряча контейнер либо в display:none, либо в координаты -9999px.

Answer 4

[Moor]

Взгляните на alertify.js