» »

Светлое модальное окно плюс Ajax для uCoz


Светлое модальное окно плюс Ajax для uCoz

Отличное решение, когда модальное окно и Ajax на сайте в одном дизайн. Так вот оно и есть, вы можете установить его на сайт и все будет под один стиль работать. Это стандартные кнопки, как статистика или что будет открывать светлое ajax окно и здесь вы можете прописать функцию уже на модальное. Так как известно, оно идет как часть вашего сайта, где нудно работать в панели HTML кодов. Дизайн у него очень простой, кнопка сделано с боек и как будто она с боку заходит и при наведение как у всех оттенок изменен будет.

Поставил обратную связь, и сам код уже будет настроен на ее.

Светлое модальное окно для сайта

Как можно заметить они идентичны, и только по функциям, которые будут выполнять, можно понять, где что установлено.

Но давайте приступим к установке:

С начало CSS:



Теперь нам нужно в низ сайта поставить этот скрипт, там также будут стили, которые отвечать будут, за ширину и также длину окна, и где оно будет стоять, выставил по центру. И как сказал, там уже прописан скрипт, что вы видите по связи.



Все сделал отдельно с отступами, чтоб было понятно, что нужно убрать и прописать свое. Если свое будете ставить, так просто на сайте пишите в HTML и изображение ставите или подчеркивайте любым оттенком цвета, потом на визуальном редакторе все проверяем и ровняем и только после этого берем, что написали и вставляем в окно. Если нужно что б шире было, то там ниже стили и подгоняем как вы видите сами.
Здесь как раз не так сложно как на других, так как все сделано под рукой.

Источник: webo4ka.ru
28.04.2016 Просмотров: 407 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
tsakonter
tsakonter 28.04.2016 02:111
0
Так все понятно, но там стили нужно в CSS ставить, если ты решил установить оба окна, не будут ли они конфликтовать.
Kosten
Kosten 28.04.2016 02:282
0
Нет не будет не какого конфликта, так как мы ставим в CSS и если у вас другое окно стоит, то придется его убрать. Если окно которое уже стоит, а вы хотите только модальное поставить, то нужно стили закрепить в style и ставить на странице, где хотите видеть модальное окна перед /body, уже такой стиль. Но также можно попробовать, но так не раз делал, установить в низ сайта к или вверх сайта, чтоб на всех показывало.

Код
<style type="text/css">  
  .xw-hdr-text {font-size:12px; font-weight:bold; text-shadow:0px 1px 0px #eee; color:#a9a9a9 !important;}  
  .xw-tl {background:#fff !important; border:1px solid #a9a9a9 !important; padding:0 0 0 10x; color:#a9a9a9;}  
  .xw-tc {background:#fff !important; padding:7px 0 0 10px !important; line-height:30px !important; height:30px !important;}  
  .xw-tr {background:#fff !important; padding-right:0 !important;}  
  .xw-ml {background:#fff !important; border-left:1px solid #a9a9a9 !important; border-right:1px solid #a9a9a9 !important; padding:5px !important;}  
  .xw-mr {padding:0 !important;}  
  .xw-body {border:none !important;}  
  .xw-bl {background:#fff !important; border-left:1px solid #a9a9a9 !important; padding:0 !important;}  
  .xw-bc {background:#fff !important; border-bottom:1px solid #a9a9a9 !important; padding:0 !important;}  
  .xw-br {background:#fff !important; border-right:1px solid #a9a9a9 !important; padding:0 !important;}  
  .xw-blank {background:#fff !important;}  

  .xw-plain .xw-mc {background:#fff !important; border:none !important; color:#a9a9a9; font-size:12px;}  

  .x-sh .xstl, .x-sh .xsml, .x-sh .xstr, .x-sh .xsmr, .x-sh .xsbl, .x-sh .xsbc, .x-sh .xsbr {background:none !important;}  
  .xt {margin-top:-1px !important;}  
  .xt-close {background:url('http://zornet.ru/CSS-ZORNET/gerav/Yor/close.png') 0 0 no-repeat !important; width:38px !important; height:23px !important;}  
  .xt-close-over {background:url('http://zornet.ru/CSS-ZORNET/gerav/Yor/close.png') -38px 0px no-repeat !important;}  
  </style>


Также можно сделать через файл, что еще удобнее, здесь в этой статье написано как делать.

Но если решили оставить только это окно, то ставим все по установке как написано и все, вот так у вас будет.



Если есть вопросы, пишем в комментариях, будем разбирать.
Сопрано
Сопрано 28.04.2016 02:313
0
А сто источник вебочка, мне кажется это окно появилось, еще сайта не было, и почему под спойлером коды и стили?
Kosten
Kosten 28.04.2016 02:364
0
Trantel, но нужно понимать, что Ajax, это не не тоже что модальное окно, все же есть большая разница. Просто думаю взяли дизайн этого окна и их него запелили не плохое окно.
Сопрано
Сопрано 28.04.2016 02:395
0
Так и понял, что дизайн приватизировали, но нужно писать, что разработал, так правильно будет, а не источник.
Kosten
Kosten 28.04.2016 02:566
0
Траст, но комментарий нужно просматривать, но безусловно заметил, если вон простыню написал, что если другое окно стоит, а здесь вы хотите это модальное окно поставить.
Сафрон
Сафрон 28.04.2016 03:007
0
Есть еще один выход, чтоб установить 2 стиля по одной функций, это стиль поместить файл и его закачать на сайт и поменять формат у него на CSS и ссылку поставить сбда.

Код
<style type="text/css">  
@import url('Ваша ссылка.css') all;  
</style>


И потом вверх или вниз сайта и сохранить.
Kosten
Kosten 28.04.2016 03:038
0
Сафрон, все правильно, про этот метод забыл, так что можно выбрать, или не заморачиваться и поставить одно.
feliksteg
feliksteg 28.04.2016 21:169
0
Не понимаю, для чего ставить несколько окон и чтоб они все были под разным дизайн. Но если ставить модальное окно, то думаю лучше будет чтоб от пл своему стилю схожий. А здесь еще сразу стили идут.
avatar
BALCETUL6683 08.05.2016 13:4910
0
хех biggrin мое окно! Я рисовал его для своего сайта... На вебо4ке адаптировали...
ТЫК
Kosten
Kosten 08.05.2016 17:2311
0
Так там и нашел под Ajxa и здесь же модальное.
avatar
BALCETUL6683 18.05.2016 19:1912
0
все норм smile
avatar