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

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

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

Модальные 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 / МатериалСпам
Я незнаю почему, но у меня стандартные остались
0
White Whitov 2014-02-09 в 18:27 / МатериалСпам
я поставил этот скрипт, но теперь когда выбираешь смайл для отправки в чат,Ajax окно имеет голубой фон, как в стандартном окне, как изменить фон ?
0
tggsite 2014-02-09 в 06:22 / МатериалСпам
Собираюсь воспользоваться
0
hesoyam 2014-01-12 в 23:14 / МатериалСпам
всё сам разобрался.
0
hesoyam 2014-01-12 в 18:02 / МатериалСпам
как поменять цвет надписи у меня всё засветилась что написано не видно подскажите где меняется свет
0
Михаил Васильев 2013-11-10 в 02:58 / МатериалСпам
Спасибо =)
0
Кирилл 2013-11-10 в 02:02 / МатериалСпам
мм, неплохо так)
1
Владимир Духовник 2013-11-06 в 10:54 / МатериалСпам
Во второй версии, с синей кнопкой отображается стандартное отключение, а первый вариант работает. Спасибо.
1
Иван Цыганков 2013-11-05 в 21:33 / МатериалСпам
У меня не робит, странно.
0
Михаил Васильев 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; }
0
Денис Абдуллин 2013-11-04 в 21:55 / МатериалСпам
zloykitaec7, никак
0
Владимир Духовник 2013-11-04 в 22:17 / МатериалСпам
zloykitaec7, добавь сюда, мне лично очень нужно будет через пару дней.
0
Михаил Васильев 2013-11-04 в 21:27 / МатериалСпам
А точно, тупанул =) У меня есть версия, где кнопка закрыть синяя, как мне добавить эту версию в эту статью?
0
Денис Абдуллин 2013-11-04 в 20:37 / МатериалСпам
zloykitaec7, это если просто на HTML-страницу. Я пробовал CSS-код ставить просто в "Таблицу стилей" - работает.
0
Михаил Васильев 2013-11-04 в 19:39 / МатериалСпам
Вначале кода "<style>", а в конце "</style>". Без кавычек..
2
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.