Блог Сергея Князева

Скрипты
3 новых вида Ajax Окон для Ucoz

3 новых вида Ajax Окон для Ucoz

19.02.20174722
Уже прошло более полу года с момента выхода последней темы на моём блоге. Не было не времени ни желания так как блог сам по себе в данный момент не пользуется спросом. Сегодня я решил восстановить работу блога и попробовать всё запустить снова. И так темой для данной темы стал вопрос по виду Ajax окон от Ucoz.
Ведь не для кого не секрет, что стандартный вид Ajax окон который предоставляет ucoz ужасный. Я хочу показать примеры как можно преобразить Ajax окна под ваш дизайн.

Пример №1


Center-WD - Новый видов Ajax Окон для Ucoz

Установите код в Таблицу стилей (CSS).

Код

.myWinCont input[type=text], .myWinCont input[type=password] {background:#fff!important;border:1px solid #ececec!important;font-size:11px!important;font-family:tahoma!important;color:#535353!important;border-radius:2px!important;padding:5px 8px!important;outline:none!important;box-shadow:none!important;}  
.myWinCont textarea {box-shadow:none!important;}  
.x-sh .xstl{padding-top:6px; background:none!important;}  
.x-sh .xsml{background:none!important;}  
.x-sh .xstr{padding-top:6px; background:none!important;}  
.x-sh .xsmr{background:none!important;}  
.x-sh .xsbl{padding-left:6px;background:none!important;}  
.x-sh .xsbc{background:none!important;}  
.x-sh .xsbr{padding-right:6px;background:none!important;}  
.xt {background:none!important; margin-left:5px!important; margin-top:1px!important; width:25px!important; height:20px!important;}  
.xt-close{background:url('http://center-wd.ru/blog-materials/104/ajax_2.png') no-repeat!important; margin:1px 0 0 0px!important;}  
.xt-close-over{background:url('http://center-wd.ru/blog-materials/104/ajax_2.png') no-repeat!important;}  
.xt-mini{background-position:0 -15px!important;}  
.xt-mini-over{background-position:-15px -15px!important;}  
.xt-maxi{background-position:0 -30px!important;}  
.xt-maxi-over{background-position:-15px -30px!important;}  
.xt-rest{background-position:0 -45px!important;}  
.xt-rest-over{background-position:-15px -45px!important;}  
.xw-tl {background:#fff!important; border-bottom:1px solid #6f9bc0!important; padding-left:5px!important; -webkit-border-radius: 2px 0px 0px 0px; -moz-border-radius: 2px 0px 0px 0px; border-radius: 2px 0px 0px 0px;}  
.xw-tc {background:none!important; padding:6px 10px 0px 10px!important;}  
.xw-tr {background:none!important; padding-right:5px!important; -webkit-border-radius: 0px 2px 0px 0px; -moz-border-radius: 0px 2px 0px 0px; border-radius: 0px 2px 0px 0px;}  
.xw-ml {background:#fff!important; padding-left:5px!important; color:#656565!important;}  
.xw-mr {background: none !important; padding-right:5px!important;}  
.xw-bl {background:#fff!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 2px; -moz-border-radius: 0px 0px 0px 2px; border-radius: 0px 0px 0px 2px;}  
.xw-br {background:#fff!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 2px 0px; -moz-border-radius: 0px 0px 2px 0px; border-radius: 0px 0px 2px 0px;}  
.xw-bc {background:#fff!important; height:5px!important;}  
.xw-hdr-text {padding:0px!important;}  
.xw-hdr-text {font-size: 11px;font-weight: 700; font-family: tahoma!important; color:#656565!important; line-height: 15px!important; vertical-align:2px!important;}  
.xw-plain .xw-mc {border-radius:2px!important; border: none!important; padding:0!important; margin:0!important; font: 11px tahoma!important; color:#656565!important; background:#fff!important;}  
.xw-body, .myWinCont {padding:0!important; margin:0!important; color:#656565!important;}  
.xw-plain .xw-body{padding: 0!important; border: none!important;}  
.xw-plain {box-shadow:0 0 6px #cecece;}  
.xw-blank {background:#fff!important;}  
.myWinTD1 {background:none!important;}


Пример №2 - В стиле FLAT


Center-WD - Новый видов Ajax Окон для Ucoz

Установите код в Таблицу стилей (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:400;float:none;margin:0;padding: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://center-wd.ru/blog-materials/104/ajax_4_2.png) no-repeat!important}
.xw-body{border:0!important;padding:0!important}
.xt-maxi{display:none}
.xt-mini{display:none}
.xt-rest{display:none}


Пример №3 - В стиле VK


Center-WD - Новый видов Ajax Окон для Ucoz

Установите код в Таблицу стилей (CSS).

Код

.xt{position:relative;overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparent url('http://center-wd.ru/blog-materials/104/tool-sprites.gif') no-repeat;margin-left:2px;margin-top:4px}
.xt-close{background-position:0 0}
.xt-close-over{background-position:-15px 0}
.xt-mini{background-position:0 -15px}
.xt-mini-over{background-position:-15px -15px}
.xt-maxi{background-position:0 -30px}
.xt-maxi-over{background-position:-15px -30px}
.xt-rest{background-position:0 -45px}
.xt-rest-over{background-position:-15px -45px}
.xw-hdr{text-align:left;white-space:nowrap;padding:1px 0 0 0;white-space:nowrap;zoom:1;height:24px}
.xw-hdr-text{vertical-align:3px;cursor:default;color:#fff;font:bold 11px tahoma,arial,verdana,sans-serif;line-height:20px}
.xw-sps{height:4px;overflow:hidden;position:absolute;width:100%;z-index:1}
.xw-tsps{height:6px}
.xw-resize .xw-tl{cursor:nw-resize}
.xw-resize .xw-tr{cursor:ne-resize}
.xw-resize .xw-sps{cursor:n-resize}
.xw-resize .xw-ml{cursor:w-resize}
.xw-resize .xw-mr{cursor:e-resize}
.xw-resize .xw-mc{cursor:default}
.xw-resize .xw-bl{cursor:sw-resize}
.xw-resize .xw-br{cursor:se-resize}
.xw-resize .xw-bc{cursor:s-resize}
.xw-tc{background:transparent url('http://center-wd.ru/blog-materials/104/top-bottom.png') repeat-x 0 0;overflow:hidden;position:relative;font-size:0;line-height:0}
.xw-tl{background:transparent url('http://center-wd.ru/blog-materials/104/left-corners.png') no-repeat 0 0;padding-left:6px;position:relative}
.xw-tr{background:transparent url('http://center-wd.ru/blog-materials/104/right-corners.png') no-repeat right 0;padding-right:6px;position:relative}
.xw-bc{background:transparent url('http://center-wd.ru/blog-materials/104/top-bottom.png') repeat-x 0 bottom;zoom:1;font-size:0;line-height:0;overflow:hidden}
.xw-bcm{height:2px;background:transparent url('http://center-wd.ru/blog-materials/104/top-bottom.png') repeat-x 0 bottom}
.xw-bc .xw-footer{padding-bottom:6px;font-size:0;line-height:0}
.xw-bcm .xw-footer{padding-bottom:2px;font-size:0;line-height:0}
.xw-bl{background:transparent url('http://center-wd.ru/blog-materials/104/left-corners.png') no-repeat 0 bottom;padding-left:6px}
.xw-br{background:transparent url('http://center-wd.ru/blog-materials/104/right-corners.png') no-repeat right bottom;padding-right:6px}
.xw-mc{border:1px solid #BCBFC4;padding:0;margin:0;font:normal 11px tahoma,arial,helvetica,sans-serif;background:#D7D7D7}
.xw-ml{background:transparent url('http://center-wd.ru/blog-materials/104/left-right.png') repeat-y 0 0;padding-left:6px}
.xw-mr{background:transparent url('http://center-wd.ru/blog-materials/104/left-right.png') repeat-y right 0;padding-right:6px}
.xw-bc{height:6px}
.xw-icon{width:16px;margin:2px 2px 0 0;height:16px}
.xw-body{background:transparent}
.xw-draggable,.xw-draggable .xw-hdr-text{cursor:move}
.xw-plain .xw-mc{background:#fff;border-right:1px solid #EAEBEC;border-bottom:1px solid #EAEBEC;border-top:1px solid #C2C5CA;border-left:1px solid #C2C5CA}
.xw-plain .xw-body{padding:3px;border-left:1px solid #EAEBEC;border-top:1px solid #EAEBEC;border-bottom:1px solid #C2C5CA;border-right:1px solid #C2C5CA;background:transparent!important}
.xw-blank{background:transparent url('http://center-wd.ru/blog-materials/104/top-bottom.png');overflow:hidden;opacity:0.7 !important}
.xw-draging .xw-bcm{opacity:0.7 !important}
.myWinCont *{color:#333 !important;outline:none !important}
.myWinCont input,.myWinCont textarea,.myWinCont select{background:#fff !important}
.myWinPollT{background:#c0c0c0 !important}
.myWinPollT td{background:#fff}
.myWinPollG{background:url('/.s/img/wd/3/gridh.gif') no-repeat 0 0 !important}

На этом всё, установка закончена. Также вы можете скачать архив .zip со всеми видами Ajax окон и стилями.
Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (2)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
ФОТОSFERA 32 02.04.2017 в 17:06Спам
Отличное решение)
3
Вижу к себе на сайт взяли))
2