Как сделать всплывающее окно на сайте ucoz

База знаний uCoz

Разворачивание/сворачивание области

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

Рассмотрим самый простой вариант. При нажатии на ссылку “Развернуть” мы получим текст:

Демонстрация работы кода:

Код состоит из двух частей:

Если код области с содержимым находится над второй частью кода, то содержимое будет раскрываться над ссылкой “Развернуть”. Если под второй частью кода, содержимое раскроется под ссылкой:

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

Для второй области spol заменить на spol2, для третьей области spol заменить на spol3 и т.д.

Вместо слова “Развернуть” вы можете поставить картинку:

Можете установить кнопку:

Устанавливать код плавного разворачивания области можно в шаблоны сайта, в содержимое страниц, созданных в редакторе, и в материалы. Во всех случаях вставлять нужно только в HTML-режиме или в режиме “Источник”. Если вы будете использовать для вставки кода визуальный редактор, ничего работать не будет!

Создание Ajax-окон

Рассмотрим на примере простого окна, которое будет появляться по клику. Простые всплывающие Ajax-окна можно использовать для вывода любой дополнительной или пояснительной текстовой информации.

Пример вызова простого Ajax-окна по клику

Демонстрация работы кода:

Настройки Ajax-окна

Единица возле элемента настройки говорит об активной функции. Ноль — неактивная, запрещенная.

Вместо слов “Ссылка, вызывающая окно” вы можете поставить картинку:

Можете установить кнопку:

Пример вызова Ajax-окна при наведении на ссылку:

Демонстрация работы кода:

Устанавливать код вызова всплывающего Ajax-окна можно в шаблоны сайта, в содержимое страниц, созданных в редакторе, и в материалы. Во всех случаях вставлять нужно только в HTML-режиме или в режиме “Источник”. Если вы будете использовать для вставки кода визуальный редактор, ничего работать не будет!

Источник

Как сделать всплывающее окно на сайте ucoz

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

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

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

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

Читайте также:  Как быстро сделать диван для кукол

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

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

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

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

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

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

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

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

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

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

Источник

Как сделать всплывающее окно на сайте ucoz

Чтобы создать всплывающее окно, многие используют программы сторонних разработчиков, например, Opt-in Monster, LeadPages или Builder плагин от SumoMe. Эти приложения удобны, но зачем использовать программы сторонних разработчиков если у большинства CMS, jQuery есть по умолчанию.

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

Если CMS не содержит по умолчанию библиотеку jQuery, её можно скачать и подключить к сайту. Но проще добавить ссылку на библиотеку jQuery:

Далее к странице еще нужно подключить два плагина jQuery:

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

Всплывающее окно можно сделать с помощью других модальных плагинов, но этот вариант самый простой.

Второй плагин который нужен это jQuery Cookie, мы применим его для пользователей которые на всплывающем окне нажали кнопку “закрыть”, и не видели всплывающее окно в течение одного месяца.

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

После подключения jQuery вместе с плагинами нужно создать файл HTML который выглядит так:

Создать всплывающее окно:

Между тегами body /body вставляем веб-форму:

Это код всплывающего окна, окно появится после того как пользователь откроет сайт. Вид всплывающего окна не яркий, но это не имеет значения.

Стоит уточнить пару вещей:

1. Всплывающее окно должно иметь уникальный ID. Для примера я использовал «opn-win«.
2. Свойство стиля установлено display=»none«, что бы всплывающее окно не отображалось в основном интерфейсе.

Прямо перед /body, нужно добавить функцию которая будет выполняться один раз при открытии страницы сайта:

Чтобы всплывающее окно появлялось при загрузке страницы нужно добавить функцию, которая предоставлена нам плагином jQuery:

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

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

Читайте также:  Как сделать волнистые волосы в пони креатор

Первый аргумент — это функция для всплывающего окна, второй параметр задержка (в миллисекундах).

Полностью функция будет выглядеть так:

Когда пользователь нажимает на всплывающем окне кнопку “закрыть”, сделаем так что бы всплывающее окно не появлялось снова один месяц. Это делает всплывающее окно не таким раздражающим. Для этого нужно выполнить функцию, после того как пользователь нажимает на кнопку “закрыть”. Кнопка “закрыть” ссылка на класс .close-modal, вот код этой кнопки:

Затем внутри этой новой функции, мы создадим cookie:

cookie с именем hideTheModal имеет значение true. Также мы можем в параметре expires указать как долго должны хранится куки:

Если заменить значение параметра expires на 1 — всплывающее окно будет появлятся один раз в сутки, 7 — всплывающее окно один раз в неделю.

Напомню, что браузер Google Chrome не поддерживает cookies для локальных файлов. Это означает, что Вы должны будете проверить функциональность cookie на другом браузере.

Поэтому лучше добавить следующее условное:

В контексте, код должен выглядеть так:

Модальное окно jQuery:

Создать всплывающее окно с помощью jQuery не сложно. Использовать этот подход или нет будет зависеть от содержания вашего сайта.

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

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

— сообщения, не относящиеся к содержанию статьи или к контексту обсуждения
— оскорбление и угрозы в адрес посетителей сайта
— в комментариях запрещаются выражения, содержащие ненормативную лексику, унижающие
человеческое достоинство, разжигающие межнациональную рознь
— спам, а также реклама любых товаров и услуг, иных ресурсов, СМИ или событий, не
относящихся к контексту обсуждения статьи

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

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

Источник

Способы создания окон PopUp

Введение

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

Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.

Вконтакте

Facebook

Twitter

Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.

Постановка задачи(ТЗ)

Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

Решение

Способ 1
Результат:

Очень часто предлагают использовать:

Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Html (без изменений)
Результат аналогичный

Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Добавление магии на Jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:

Также необходимо обновить Html:

Читайте также:  Как сделать адрес в поиске яндекс
Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

Источник

Создаем всплывающее окно при входе на сайт на HTML и jQuery

Начало

Импорт шрифтов Google

Сброс CSS и стилей сайта по умолчанию

Ссылка на jQuery v1.10

Создание CSS-наложения

Прежде всего, необходимо создать элемент наложения и контейнер для формы входа.

Поскольку его стили разделяются на две основные части, я собираюсь объяснить их по отдельности.

Сначала рассмотрим установку позиции и добавление цвета

Перед тем, как перейти к popup окну для сайта, пояснение Flexbox :

Примечание : на момент написания этой статьи flexbox не полностью поддерживался во всех основных браузерах. Если хотите охватить максимальное количество браузеров, необходимо использовать префиксы:

Стили панели входа на HTML и CSS

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

Большинство CSS-свойств очевидны. С помощью значения rgba мы еще раз установили цвет фона, что дает красивый непрозрачный эффект. border-radius задает закругленные углы контейнера формы входа.

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

Теперь нужно оформить внутри панели входа заголовок ( h3 ):

Создание кнопки закрытия

Перед тем, как сделать popup окно, нужно создать кнопку закрытия формы входа. Это делается следующим образом:

Вот объяснение кода:

Создание формы входа

Скоро перейдем к HTML popup окну. А пока CSS-код формы входа:

Сначала мы определили стили для меток формы. Благодаря этому пользователь может нажать текст и перейти к соответствующему полю формы. Элемент label работает непосредственно с id данных.

Использование селектора :focus позволяет указать, как будет выглядеть элемент ввода данных, когда пользователь установил в нем курсор. Необходимо наглядно показать, что элемент в данный момент выбран.

Стили кнопки входа

Стили кнопки не содержат ничего нового:

Для кнопки мы задали приятный синий фон с полупрозрачной темной рамкой. Этот прием позволяет не менять цвет границы, когда мы изменяем цвет фона. Мы также установили для кнопки стандартную CSS-анимацию перехода при смене цвета фона.

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

HTML-код формы входа

Полный HTML-код формы входа:

jQuery / Javascript

Нужно обернуть функции jQuery в функцию, которая загружается после того, как документ готов. Это предотвращает замедление:

Мы используем fadeToggle при нажатии ссылки входа в систему. Для этого нам потребуется событие jQuery click :

Использование jQuery-функции preventDefault() позволяет остановить связь с перенаправлением пользователя. Это обеспечивает функционал для разработчиков, которые могут ссылаться на страницу входа:

С помощью этой простой функции мы продублируем функционал для закрытия окна.

В JS popup окне сделаем так, чтобы пользователь мог нажать клавишу ESC для закрытия окна:

Вот все весь код jQuery :

AJAX и HTML 5

Что, если вы захотите сделать эту форму еще лучше? Можно включить в нее форму регистрации. Вот как это можно сделать без дублирования кода с помощью запроса JQuery AJAX GET :

Я создал новый класс для формы входа и ссылки для регистрации под названием « overlayLink ». После того, как пользователь нажимает на этот элемент, запускается функция.

Код страницы ajax/login-form.html будет выглядеть следующим образом:

Ссылки для вызова запроса AJAX будут выглядеть так:

Затем можно создать файл ajax/registration-form.html :

Заключение и полный код

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

Источник

Оцените статью
Как сделать своими руками
Adblock
detector