Как сделать ajax окно ucoz

Добавил пользователь Алексей Ф.
Обновлено: 17.09.2024

Сегодня я Вас научу, как можно сделать всплывающие окошки на движке юкоз по технологии AJAX. Ничего сверхъестественного в этом нет и если Вы начинающий веб-мастер, не стоит боятся этого урока. Я подробно все опишу, тем более описывать многого не придется – статья небольшая.

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

Затем надо указать размер всплывающего окошка. В примере кода у меня установлен размер 100 на 100, т.е. длина 100 и 100 ширина. Единица измерения не проценты, а пиксели (точки). Смотрим на код всплывающего окошка ниже, где я выделил эти параметры красным.

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

Для начала покажу код, если хотим чтобы окошко появлялась при нажатии по ссылке:

А вот, если хотите, чтобы ссылкой была картинка (кнопка):

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

Код первого выглядит так:

Если же мы хотим, чтобы всплывающем окне появилась отдельная интернет страницы, то указываем нужно следующее:

Вот как это будет выглядеть:

Если нам это не нужно, то устанавливаем этот параметр в false:

Также в коде предусмотрено функция модального окна. Как это и что это? Все просто. При открытии всплывающего окна все остальное вокруг станет неактивным и пользователь должен будет обратить внимание на вашу информацию. (modal: false – неактивна функция, modal: true – активна)

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

Для начала покажу код, если хотим чтобы окошко появлялась при нажатии по ссылке:

А вот, если хотите, чтобы ссылкой была картинка (кнопка):

Код первого выглядит так:

Вот как это будет выглядеть:

Если нам это не нужно, то устанавливаем этот параметр в false:

При сочетании нескольких параметров кода вы добьетесь нужного вам результата, нужного Вам всплывающего окошка по технологии AJAX.

А можно ли вставить в ajax юкозовские коды, например $POLL$ и подобные? Я попробовал косяк выходит :(

использовал код пользователя admin7526. Этот код работает. Но вот как сделать чтобы всплывающее окно находилось по середине окна браузера и во всплывающем окне сделать кнопку "Закрыть окно" , это для меня вопрос. Если можите, помогите пожалуйста. спасибо.

Код действует но окно с ссылкой сайта(который в этом окне должен открыться)..тут же закрывается, не успев открыться сайту. Как быть .

Ajax-окна в системе uCoz используются практически везде, для авторизации, для просмотра репутации и наград, для кнопок загрузки материалов и так далее.

Стандартный вид данных окон после обновления uCoz выглядит довольно не плохо, но я думаю практически каждому хотелось бы украсить и сделать все по своему. В этом материале я подготовил для вас несколько расцветок для ajax-окон uCoz .

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

И так, перейдем к установке :

1. Выбираем стиль который вам больше нравится или который подходит под ваш дизайн сайта.

2. Копируем код нужного стиля и вставляем в CSS-стили сайта через панель управления.

.xw-body <
border: 0 !important;
padding-left: 2px !important;
padding-right: 1px !important; >
.xw-ml <
padding-left: 1px !important;
padding-bottom: 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; >
.xw-bl < display: none !important; >
.myWinTD1 <
background: rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(250, 250, 250) !important; >
.myWinPollT <
background: rgb(243, 243, 243) !important;
float: left !important;
margin-right: 257px !important;
width: 100% !important; >
.myWinPollG < display: none !important; >
.myWinCont strong, b <
color: rgb(63, 63, 63) !important; >

2. Темный фон шапки и темно-голубой фон содержания :

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

При копировании материала указывать ссылку на источник.

Администрация данного сайта не несет ответственность за использование ресурсов доступных на этом сайте. Вся информация дана исключительно в образовательных целях. Вся информация, расположенная на этом сайте предназначена только для ознакомительных целей, авторы не несут ответственности за возможные последствия использования их в целях, запрещенных Уголовным Кодексом . Вы обязуетесь не применять полученные здесь программы и информацию в целях, запрещённых УК . Ни при каких условиях и обстоятельствах ответственность за последствия, которые прямо или косвенно повлекло за собой использование информации или программного обеспечения, размещенного на этом сайте, не может возлагаться на авторов сайта и быть основанием для их судебного преследования. Вы соглашаетесь с указанными условиями, можете приступить к регистрации и дальнейшему просмотру материалов. В противном случае рекомендуется немедленно покинуть сайт.

Начнем с того, что на сайте общаются сотни людей, разных религих и взглядов,
и все они являются полноправными посетителями нашего сайта, поэтому если мы хотим чтобы это сообщество людей функционировало нам и необходимы правила. Мы настоятельно рекомендуем прочитать настоящие правила, это займет у вас всего минут пять, но сбережет нам и вам время и поможет сделать сайт более интересным и организованным.

Администрация сайта оставляет за собой право:
Удалять комментарии или часть комментариев, если они не соответствуют данным требованиям.

Всем привет, работая над своим новым проектом я решил создать Ajax окно в стили To Do Lista, но так как такое визуальное оформление не очень хорошо смотрелось с дизайном сайта, я решил отказаться от данной идеи, поэтому выкладываю на общее скачивание данное оформления окна.

Как и с предыдущим вариантом стиля Ajax окон uCoz, нам не придётся создавать отдельный css файл или прописывать стили после тега , копируем ниже приведённый код в свой файл стилей

Читайте также: