Ajax окна на uCoz в стиле LightBox

02013-11-03731715Денис Абдуллин

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

Установка

Вставьте следующий код в низ "Таблицы стилей (CSS)":

Код

.x-sh, .xw-bl {display:none !important;}
.xw-ml, .xw-mr {margin:0 !important;padding:0 !important;background:none !important;}
.xw-mc {color:#333; font-weight: normal; float: none; margin: 0; padding: 8px 8px !important; background: #fff !important; border: 1px solid #c4cee0 !important;border-radius:4px;-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
.xw-hdr-text {display: none !important;}
.xw-hdr img {display:none;}
.xw-tl, .xw-tr, .xw-tc, .xw-hdr, .xw-sps .xw-draggable {height: 0 !important;background: none !important;padding: 0 !important;}
.xw-tc {overflow: visible !important;}
.xt-close {position: absolute !important;right: -18px;top: -18px;margin: 0 !important;z-index: 10014 !important;width: 36px !important;height: 36px !important; background: url(/.s/src/ulightbox/fancybox_sprite.png) no-repeat !important;}
.xw-body {border: 0 !important;padding: 0 !important;}
.xt-maxi {display:none;}
.xt-mini {display:none;}
.xt-rest {display:none;}

Демо страница

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (15)

Порядок вывода комментариев:

Павел Гергерт 2014-08-27 в 12:53 / МатериалСпам

Я незнаю почему, но у меня стандартные остались

White Whitov 2014-02-09 в 18:27 / МатериалСпам

я поставил этот скрипт, но теперь когда выбираешь смайл для отправки в чат,Ajax окно имеет голубой фон, как в стандартном окне, как изменить фон ?

tggsite 2014-02-09 в 06:22 / МатериалСпам

Собираюсь воспользоваться

hesoyam 2014-01-12 в 23:14 / МатериалСпам

всё сам разобрался.

hesoyam 2014-01-12 в 18:02 / МатериалСпам

как поменять цвет надписи у меня всё засветилась что написано не видно подскажите где меняется свет

Михаил Васильев 2013-11-10 в 02:58 / МатериалСпам

Спасибо =)

Кирилл 2013-11-10 в 02:02 / МатериалСпам

мм, неплохо так)

Владимир Духовник 2013-11-06 в 10:54 / МатериалСпам

Во второй версии, с синей кнопкой отображается стандартное отключение, а первый вариант работает. Спасибо.

Иван Цыганков 2013-11-05 в 21:33 / МатериалСпам

У меня не робит, странно.

Михаил Васильев 2013-11-04 в 23:01 / МатериалСпам

прошлый .xt-close меняешь на это :
.xt-close { top: -11px; right: -8px; width: 31px; height: 31px; background: url(/.s/img/welcome/fancybox_close.png) no-repeat; position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 10014; }