Светлое модальное окно плюс Ajax для uCoz
 | |
| Отличное решение, когда модальное окно и Ajax на сайте в одном дизайн. Так вот оно и есть, вы можете установить его на сайт и все будет под один стиль работать. Это стандартные кнопки, как статистика или что будет открывать светлое ajax окно и здесь вы можете прописать функцию уже на модальное. Так как известно, оно идет как часть вашего сайта, где нудно работать в панели HTML кодов. Дизайн у него очень простой, кнопка сделано с боек и как будто она с боку заходит и при наведение как у всех оттенок изменен будет. Поставил обратную связь, и сам код уже будет настроен на ее.  Как можно заметить они идентичны, и только по функциям, которые будут выполнять, можно понять, где что установлено. Но давайте приступим к установке: С начало CSS: Теперь нам нужно в низ сайта поставить этот скрипт, там также будут стили, которые отвечать будут, за ширину и также длину окна, и где оно будет стоять, выставил по центру. И как сказал, там уже прописан скрипт, что вы видите по связи. Все сделал отдельно с отступами, чтоб было понятно, что нужно убрать и прописать свое. Если свое будете ставить, так просто на сайте пишите в HTML и изображение ставите или подчеркивайте любым оттенком цвета, потом на визуальном редакторе все проверяем и ровняем и только после этого берем, что написали и вставляем в окно. Если нужно что б шире было, то там ниже стили и подгоняем как вы видите сами. Здесь как раз не так сложно как на других, так как все сделано под рукой. Источник: webo4ka.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
|
Нет не будет не какого конфликта, так как мы ставим в 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> Также можно сделать через файл, что еще удобнее, здесь в этой статье написано как делать. Но если решили оставить только это окно, то ставим все по установке как написано и все, вот так у вас будет.  Если есть вопросы, пишем в комментариях, будем разбирать. 
все норм
 | |
мое окно! Я рисовал его для своего сайта... На вебо4ке адаптировали...