Как сделать модальное окно в axure
Добавил пользователь Владимир З. Обновлено: 18.09.2024
Привет друзья, в этому году меня несколько раз просили объяснить, как сделать модальное окно на сайте. Кто-то, изучая азы веб-разработки неизбежно приходил к ситуации, когда часть контент необходимо отобразить в модальном окне, кто-то, работая с формами, хочет показать ее не в открытом виде, а в pop-up при клике на кнопку.
Несмотря на то, что на блоге уже были статьи, косвенно связанные с реализацией этого эффекта, вопросы все равно остаются и я решил сделать несколько статей, связанных с этой темой. Сегодня разберемся просто с модальными окнами, а в следующий раз сделаем пульсирующую кнопку в углу экрана, как у сервисов обратного звонка и еще просили урок с анимацией блика на кнопке.
Все это выйдет друг за другом. Конечно, это статьи, ориентированные на новичков, и мастодонтам они будут не очень интересны, но тем, кто использует блог как справочник, возможно, пригодятся эти наработки, чтобы быстро реализовывать тот или иной эффект, не описывая одно и тоже каждый раз в новом проекте и сэкономят немного времени. Приступим.
Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:
- модальное окно с использованием jQuery.
- Простое модальное окно с использованием чистого js.
Конечно же я покажу как вызывать несколько модальных окно на станице, так как это тоже один из частых вопросов, возникающих у новичков. Разберем возможность закрытия окна при клике вне области контента, решим проблему вертикальной прокрути и другие нюансы, которые возникнут в ходе работы или о которых сообщите вы в комментариях.
Структура проекта для понимания какие файлы и где находятся.
Начнем с разметки. Для создания модального окна я обычно пользуюсь такой структурой.
Где "modal" — это затемненный фон, а "modal__content" - область контента. При этом, когда срабатывает триггер, вызывающий окно, например нажатие кнопки, то к "modal" добавляется класс "modal_active", который дает понять, что модальное окно находится в открытом состоянии. Добавляя или удаляя "modal_active" мы будем открывать или скрывать модальное окно манипулирую стилями.
Большинству читающих нужна будет форма в модальном окне. Можно использовать эту.
Я, для примера, просто выведу текст:
Создал простейшую шапку сайта с кнопкой обратного звонка, которая должна вызвать модальное окно. Классический пример любого лендинга.
Давайте добавим немного стилей и приведем в порядок открытое состояние модалки. Вот, что получилось у меня.
Обратите внимание, что в правом углу контентной области модального окна появилась кнопка с изображением крестика. Файл лежит в папке "img", рядом с папкой "js" и "css".
Тут нас больше всего интересует класс ".modal". Как я и говорил, это само модальное окно с полупрозрачным фоном. Давайте подробнее разберем что там за стили.
Первым делом "вырвем" из потока блок с модальным окном при помощи фиксированного позиционирования. Затем, при помощи свойств "top", "left", "right", "bottom" растянем модальное окно по ширине на весь экран. Z-index - нужен для того, чтобы расположить окно над всеми элементами. Если у кого-то другого элемента значение этого свойства будет выше, то модальное окно не перекроет его.
Далее задаю цвет фона модального окна.
Цвет задаю в RGBA формате. Первые 3 цифры — это цвет, а последняя — прозрачность. Где ".9" — это прозрачность в 90%.
Далее использую flexbox для центрирования элемента "modal__content" внутри "modal", задаю возможность вертикальной прокрутки и внутренние отступы.
Окно прекрасно смотрится, но есть одно "но!". Помните я говорил, что активное состояния модального окна, это когда у нас есть класс "modal_active", а без этого класса, окно закрыто? Сейчас мы доведем до ума эту концепцию. Суть в том, чтобы при "modal" сделать окно скрытым, а при "modal_active" - показать.
Давайте создадим этот класс в стилях и настроим отображение окна только при его наличии.
Для показа/скрытия окна будем пользоваться "visibility", "opacity", "position" и свойство "transition" для плавности анимации появления.
Если еще подробнее, то сначала зададим нулевую прозрачность, а при помощи абсолютного позиционирования и свойства "top" уберем модальное окно за пределы видимости. Дополнительно, для надежности, при помощи свойства "visibility" скроем разметку окна.
В момент, когда появится класс "modal_active" инвертируем "visibility" и "opacity", а также поменять "position" и положение в свойстве "top".
Звучит страшнее, чем кажется, на сам деле все довольно просто.
Теперь в таком состоянии окно скрыто:
А в таком, окно открыто:
Попробуйте добавить вручную и убедиться, что окно успешно появляется.
Пол дела сделали, осталось добавлять этот класс модальному окну при клике по кнопке. Тут подход и разделится. Первый вариант сделаем с использованием jQuery, а второй без него на чистом js.
Но прежде нужно подключить файл скриптов к нашей html страничке. Делается это так:
Вызов модального окна при помощи jQuery
Исходник модального окна с использованием jQuery
Первым делом нужно подключить сам jQuery, перед скриптом, который мы добавили чуть выше. То есть порядок подключения должен быть таким:
Как и условились ранее, вызов окна будет происходить при клике на кнопку в шапке. Давайте обработаем это событие, предварительно объявив в файле "scripts.js", что весь код написанный в нем должен исполняться после загрузки страницы.
Инструменты разработчика можно открыть командой ctrl+shift+i, в некоторых браузерах клавишей f12 или через меню.
Теперь давайте добавим класс "modal_active" нашему модальному окну, а при клике на кнопку с крестиком удалим его.
Попробуйте, смотрится совсем не плохо.
Теперь давайте реализуем функционал, когда модальное окно закрывается при клике, вне области контента этого окна. Делается это довольно просто.
Проверяйте, все должно отлично работать.
Теперь давайте разберем небольшой нюанс. Когда у вас страница наполнится контентом, то неизбежно появится вертикальная прокрутка.
При этом мы сделали так, чтобы если контент не помещается в модальное окно в нем тоже появлялась прокрутка. В таком случае смотрится это не очень красиво и нужно от этого избавляться.
Делается это довольно просто. При вызове окна мы просто уберем у тега "body" возможность прокрути. А когда окно будет закрываться, вернем все все на место.
Можно пойти 2 путями: менять стили прямо в js или создать специальный класс для тега body, который и будем убирать прокрутку. Я, обычно, пользуюсь вторым способом.
Давайте в таблице создадим класс ".hidden" и пропишем ему "overflow", запрещающий прокрутку.
В скрипте, при открытии модального окна, запретим прокрутку у тега "body" путем добавления класса "hidden".
При этом, не забывайте удалять его при закрытии модального окна. В целом все это выглядит так.
Если у вас разные кнопки вызывают разные модальные окна, то привязывайтесь не к классу окна, а к "id", который должен быть уникальным на странице. То есть если у модального окна , то и обращаться к нему можно так:
Если несколько кнопок вызывают одно и тоже окно, то можно перечислить их айди и классы так:
На этом способ реализации открытия модального окна при помощи jQuery можно считать оконченным. Если будут вопросы, то задавайте в комментариях - не стесняйтесь.
3. Masters (templates, or reusable collections of widgets) – элементы, которые отображаются на страницах сайта в неизменном виде.
4. Page area – основное рабочее пространство.
5. Page notes and interactions – форматирование страницы, действия задаваемые для страницы, примечания к страниц.
6. Widget properties – форматирование элемента, примечание к элементу, действия задаваемые для элемента
7. Dynamic Panel Manager – управление динамическими элементами, например переключающимся табами.
Sitemap
- flow - используются для создания структуры сайта, блоки используемые для создания структуры берутся здесь (Модуль Widgets -> библиотека Flow)
В Axure можно создавать структуру сайта автоматически для прототипов с числом страниц больше 1. (вся процедура создания в приложенной картинке)
Для этого необходимо создать новую страницу, желательно первой в структуре сайта.
Задать странице тип Flow.
Кликнуть правой по главной странице и выбрать Generate flow diagram, диаграмма с генерируется автоматически.
Связи между блоками задаются с помощью стрелок, блоки берутся из библиотеки flow.
Widgets
В модуль виджеты можно загружать дополнительные элементы – библиотеки. (Wireframes -> Load library – выбрать файл с расширением .rplib)
Rectangle - основной элемент при создании wireframes
Для этого элемента можно задавать различную форму:
- треугольник (4 направления острого угла)
- вкладки/ табы (направленные вверх, вниз, влево, вправо)
У элемента могут быть различные состояния, в зависимости от состояния меняется вид элемента.
- Rollover: курсор над виджетом.
- Mouse Down: щелчок мыши
- Selected: элемент выбран
- Disabled: элемент запрещен.
Masters
Мастера служат для создание элементов которые не меняются на разных страницах.
К этим элементом можно однозначно отнести:
а также и другие элементы которые полностью или частично используются на разных страницах:
Page area
Поле поддерживает вставку графических элементов из буфера обмена, можно и нужно держать под рукой запущенный фотошоп для вставки различных графических эллементов.
Page notes and interactions
1. Page notes - поле служит для добавления "заметок", заметки используются? при автоматическом создании документации
2. Page interactions - поле служит для добавления какого либо действия после загрузки страницы
3. Page formating - поле для форматирования основного рабочего пространства, позволяет:
3.1. Оформить элементы на странице в стиле наброска (sketch) величина задается в %
3.2. Задать стиль и фон для страницы, причем фон можно задавать на странице с использованием картинок-заготовок, повторяемых по оси х и/или y.
Widget properties
Данная панель по своим свойствам сходна с Page notes and interactions, но есть и существенные различия.
В виджете три вкладки три вкладки:
1. Annotations - панель с полями добавляющими дополнительную информацию к объекту (в готовом прототипе появляется характерный заначек у элемента) , описание, статус, риск и тп.
2. Interactions
3. Formatting - блок в котором можно задать визуальное отображение элемента (отформатировать), блок частично дублируется в верхнем меню.
- шрифт (название, начертание, размер, цвет текста, буллит )
- выравнивание текста (по горизонтали и вертикали)
- паддинги (для таблиц)
- положения относительно других элементов
- фон, borders (его цвет, тип линий, толщина линии)
Dynamic Panel Manager
С помощью этой панели и панели interactions (Widget properties -> interactions) можно придать динамику различным элементам сайта. Н/п переключающиеся табы, слайдшоу и тп.
Actions
Actions это основные функции для придания прототипу интерактивности.
Интерпретация панели Actions (Действия) — вольный перевод
Open Link in Current Window: Открывает страницу или внешний URL в текущем окне.
Open Link in Popup Window: Открывает страницу в поп-апе. Вы можете указать размер и свойства поп-апа.
Open Link in Parent Window: Открывает страницу в родительском окне поп-апа (страницу из которой был открыт поп-ап).
Close Current Window: Закрывает текущее окно.
Open Link(s) in Frame(s): Открывает страницу в виджете Inline Frame (фрейм).
Open Link in Parent Frame: Открывает страницу в родительском окне фрейма.
Set Panel state(s) to state(s): Делает видимым состояние одной или более динамической панели.
Show Panel(s): Делает видимым одну или более динамическую панель.
Hide Panel(s): Скрывает одну или более динамическую панель.
Toggle Visibility for Panel(s): Показывает или скрывает динамические панели на основе их нынешних видимости.
Move Panel(s): Переместить динамические панели в определенное место или на указанное расстояние.
Bring Panel(s) to Front: Переносит динамические панели на верхний слой страницы.
Set Variable and Widget value(s) equal to Value(s): Устанавливает значение одной или нескольких переменных или значения виджета.
Scroll to Image Map Region (Anchors): Прокрутить страницу до виджета Image Map Region (якорь).
Enable Widget(s): Включает виджеты, такие как Droplist, Text Field или Button. Disable Widget(s): Отключает виджеты.
Set Widget(s) to Selected State: Устанавливает выбранный стиль виджетов или возвращает назад по умолчанию.
В прошлом материале мы подробно рассказали, что представляет собой этап аналитики и проектирования сайтов в нашем агентстве. Сегодня хотим расширить тему: поделиться своими принципами работы и рассмотреть инструменты, с помощью которых создаем прототипы разных digital-продуктов.
Принцип работы UX-специалистов агентства
Определить, какие страницы предстоит спроектировать и утвердить с заказчиком, нам позволяет этап аналитики. После его проведения мы создаем прототипы только уникальных или сложных функциональных страниц. Если на сайте много типовых, то делаем один прототип такой страницы с максимальным набором возможных блоков. Кроме того, создаем отдельную страницу, на которой размещаем все повторно используемые элементы и блоки прототипа, описывая их назначение и правила использования. Как показывает практика, такое решение помогает нашим дизайнерам быстрее погрузиться в проект и оценить масштабы предстоящей работы.
Для разработки прототипов мы в Uplab используем программу Axure RP — мощный инструмент по созданию динамических страниц без использования кода. Несмотря на бум развития рынка инструментов прототипирования, аналогов ему по удобству и функционалу, на наш взгляд, пока что нет.
Не так давно версия Axure 9 вышла из беты. Мы уже успели реализовать в ней часть проектов и хотим поделиться, какие особенности и приятные новшества инструмента для себя отметили.
Узнать, как создать модальное окно с помощью CSS и JavaScript.
Создать модальное окно
Модаль - это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы:
Модальный заголовок
Модальный нижний колонтитул
Шаг 1) Добавить HTML:
Пример
Некоторый текст в модальном..
The Modal Part
with class="modal" is a container element for the modal and the div with class="modal-content" is where you put your modal content (headings, paragraphs, images, etc).
The element with class="close" should be used to close the modal.
Шаг 2) Добавить CSS:
Пример
/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
>
.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Добавить a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we'll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px - this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Шаг 3) Добавить JavaScript:
Пример
// Получить модальный
var modal = document.getElementById("myModal");
// Получить кнопку, которая открывает модальный
var btn = document.getElementById("myBtn");
// Получить элемент , который закрывает модальный
var span = document.getElementsByClassName("close")[0];
// Когда пользователь нажимает на кнопку, откройте модальный
btn.onclick = function() modal.style.display = "block";
>
// Когда пользователь нажимает на (x), закройте модальное окно
span.onclick = function() modal.style.display = "none";
>
// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = "none";
>
>
Добавить верхний и нижний колонтитулы
Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:
Читайте также: