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

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

27.05.201525224

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

Установка

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

Код
.xw-mc ::-webkit-scrollbar  
  {  
  width: 8px;  
  height: 8px;  
  }  
  .xw-mc ::-webkit-scrollbar-track-piece  
  {  
  display:none;  
  }  
  .xw-mc ::-webkit-scrollbar-thumb:vertical  
  {  
  height: 5px;  
  background-color: rgba(0, 0, 0, 0.4);  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  }  
  .xw-mc ::-webkit-scrollbar-thumb:horizontal  
  {  
  width: 5px;  
  background-color: rgba(0, 0, 0, 0.4);  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  }  
  .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 #fff !important;border-radius:4px;-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}  
  .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(http://yraaa.ru/_pu/24/30435765.png) no-repeat !important;}  
  .xw-body {border: 0 !important;padding: 0 !important;}  
  .xt-maxi {display:none;}  
  .xt-mini {display:none;}  
  .xt-rest {display:none;}

Теперь на вашем сайте будет прекрасное ajax окно в стиле flat. Красиво смотрится как на светлых так и темных дизайнах сайтов.




Сохраните в социальную сеть
Комментарии (4)
Дмитрий 27.05.2015 в 08:26Спам
Хорошие окна :)
1
Сергей 27.05.2015 в 09:36Спам
Стильненько. Спасибо!
0
Павел 29.05.2015 в 15:49Спам
Стильно, но вот заголовка не хватает..
3
Dimas 01.06.2015 в 19:56Спам
норма так
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт