Как сделать модальное окно после отправки формы

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

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

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

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

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

Предостережения для мобильных устройств

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Modal title

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

Название модального окна

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Сделать модальности можно

Не забудьте добавить role="dialog" и aria-labelledby=". " , ссылаясь на модальное окно Заголовок, чтобы .modal , и role="document" к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal .

Встраивание видео YouTube

Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog . Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.

Делаем вначале структуру модального окна по аналогии как в статье создаем модальное окно.

Всю форму и заголовок добавим в класс тела модального окна modal-body, к этому классу добавим text-center, выравняtм все элементы по центру.

Все дивы будут в классе row.

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

В следующей строке row содержится форма form.

У формы обязательно будет action=send.php, файл send.php мы сделаем позже с добавлением всех полей формы.
Во вторых у формы будет метод method=post.

Получился код в index.html.

div class = "modal fade" id = "modal-question" tabindex = "-1" role = "dialog" aria - labelledby = "myModalLabel" >

button type = "button" class = "close" data - dismiss = "modal" aria - label = "Close" > span aria - hidden = "true" > & times ; / span > / button >

input type = "text" name = "phone" id = "phone-mask" required placeholder = "Телефон. " class = "form-control form-input" >

textarea name = "question" placeholder = "Ваш вопрос. " id = "" cols = "30" rows = "3" > / textarea >

Стилизуем форму в модальном окне.

Сделаем отступ модального окна сверху у класса modal-dialog свойством margin-top: 10%.

Уберем у кнопки синюю обводку outline: none, когда она в фокусе &:focus.

У заголовка hdl Сделаем синий цвет.

Вынесем крестик закрытия окно за форму, для этого классу modal-header добавим отступ вверх margin-top: -40px.

Во вторых у класса самого крестика close сделаем свойства прозрачности opacity: .8, чтобы был лучше видно и сместим вправо margin-right: -30px.

Оформим input у формы, пишем класс modal-content у него input[name=phone] отступ сверху margin-top: 15px, добавим изображение телефона background-image: url (. /img/smartphone.jpg), изображение не должно повторяться background-repeat: no-repeat.

Отступы для картинок background-position-x: 5px и background-position-y: 5px.

Отступ у текста input зададим свойством padding: 5px 25px.

Добавим фиолетовую рамку три пикселя и сделаем прозрачность opacity: .6, но при наведении и в фокусе opacity: 1.

Копируем стили input телефона и делаем для имени пользователя, только меняем картинку на человечка.

У textarea будет рамка и такой же отступ сверху margin-top: 15px.

Последнее, это стилизуем кнопку button[type=submit] делаем также во все окно по ширине width: 100%.

Добавляем цвет синий при наведении прозрачный background-color: transparent.

Два разных примера создания модальных окон на чистом CSS.

Первый с использованием HTML-элемента , а второй с флажком

Вариант с использованием HTML-элемента

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

Закрытие окна происходит по клику вне его области, а крестик показывается как декорация.

Пример:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Текст в модальном окне

background-image : url ( "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e" ) ;

Вариант с использованием флажка

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

Закрытие окна происходит по клику на крестик.

Пример:

После того, как я написал статью: обратный звонок в модальном окне MODX, посетители моего сайта попросили меня реализовать модальное окно с заказом обратного звонка на сниппете AjaxForm.

Кстати, необходимо знать что AjaxForm - сниппет-обёртка, то есть он не умеет отправлять письма, за него это делает Formit. Так что, помимо сниппета AjaxForm, у Вас должен быть установлен Formit.

На данный момент форма имеет возможности:

1. Устанавливаем AjaxForm и Formit

2. Создаем чанк tpl.AjaxForm

После того как установили, в чанках появится категория AjaxForm. В данной категории создаем чанк tpl.AjaxForm:

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

Создаем чанк шаблона собщения modal-zv-tpl, которое будет приходить Вам на электронную почту.

4. Подключаем CSS и JS

В head страницы подключаем modal.css и modal.js, помните что js подключаем после библиотеки jQuery.

Содержимое modal.js

5. Подключаем и настраиваем AjaxForm

Обычно я подключаем AjaxForm перед закрывающим тегом body.

Здесь находятся параметры сниппета AjaxForm и Formit. Документация на AjaxForm здесь, а Formit здесь.

Не забудьте поменять почту на свою!

На этом всё. Если у Вас остались вопросы, задавайте через форму ниже.

И да, не забудьте поставить ссылку с классом modal

Дополнение: Как сделать несколько форм на одной страницы?

Здесь принцип такой же, но код JavaScript нужно будет переделать и немного CSS! Вообщем нужно будет в атрибут ссылки href добавлять селектор, который нужно вывести.

Главное помните, что каждое окно должно содержать уникальный атрибут, будь это id или class

Думаю смысл я передал. Итак, приступим:

И ещё, на странице достаточно только одной подложки.

Пример вызова нескольких окон

Пишите, какие функции необходимо ещё добавить, с радостью разберемся.

P.S. Нехотите возиться? Обращайтесь ко мне, добавлю на Ваш сайт за мороженку :)

Написать комментарий

Комментарии ( 119 )

Все сделал, все получилось. За что вам огромное спасибо!

Стили поправил под себя. Но когда смотрю в коде страницы интересует что значит перед закрывающим тегом form?

Первым делом необходимо указать способ кодирования данных То есть в чанке tpl.AjaxForm пишем:

js в этой строке дает ошибку AjaxForm.Message.success

Оформляйте код в
и поддерживайте пожалуйста ветку.

Почему Вам не сделать это на AjaxForm с помощью Formit? Вы ведь используете какое-то API?

Здравствуйте.
Это чанк с кнопкой
Чанк: Header.CallBackButton:
Это скрипт modal.js
Это чанк tpl.AjaxForm
Это чанк modal-zv-tpl
Вроде все. Могу ссылку на сайт дать…

Всеравно не работает. Может это связанно с бесплатностью хостинга?
Брал пример у MuzZa отсюда — форма закрывается, но не отправляет.

Конечно нет! Еще раз огромное спасибо Игорь. Все поправил все работает. Всегда на WP был, решил осваивать что-то посерьезней. Спасибо. Подписываюсь на Вас.

Причин может быть много, что написано в консоле?
Закрытие формы происходит в событии (af_complete) в modal.js

В консоле modal.js не упоминается, но есть это:

Проблема с AjaxForm.
1. Попробуйте использовать jQuery v1.7.2
2. Имеется ли в чанке tpl.AjaxForm этот код
Но я думаю проблема с jquery!

Добрый вечер!
Все сделала по вышесказанному. В нужном месте: … Кликаю по ней на сайте, перенаправляется на главную страницу. Что я делаю не так. (((( Неделю мучаюсь.
Чанк формы:
В футере это:
modal.js. Код вставила в свой setting.js

Вот что я заметила: В мазиле экран темнеет, но модального окна все же нет. В хроме на главную кидает. Куда именно адрес сайта кинуть?

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

Добрый день!
И у меня не приходят письма((( Помогите, пожалуйста!
Установила Ajaxform и formit с установщика Modx
Вызов такой:
/tpl.AjaxForm.example/
/tpl.email/

Здравствуйте! Разобрались? Попробуйте убрать хук FormItSaveForm или допишите поля, которые должны сохраняться. А так вроде все верно и должно работать. Возможно нужно заполнить значение &emailFrom

Здравствуйте! Да, разобралась. Все элементарно, необходимый скрипт jquery, оказывается, не был подключен)))

Супер. Спасибо за ваш труд, то что нужно. Правда с вызовом класса modal часто проблемы, файл bootstrap.min.css блокировал показ кнопки на модальное окно, переименовал все работает хорошо.
Еще вопрос такой как реализовать в форме четбоксы кнопки множественного выбора и тому подобное? Возможно это реализовать в этой форме? Спасибо.

Добрый вечер, у меня не отправляются письма на почту. Подскажите пожалуйста в чем может быть проблема? Спасибо!

Я создал чанк tpl.AjaxForm
и чанк modal-zv-tpl

а вывожу чанк таким образом:

FormIt установил, я ранее делал по вашей инструкции модальное окно без Ajax, там все работало и отправлялось. Здесь почему то нет.

Здравствуйте, Игорь.
Ajax очень удобен. У меня тоже стоит обратная форма с аяксом да и не только она.
А вот с комментариями проблемы.
Может быть Вы сможете подсказать (или написать статью) как можно подключить древовидные комментарии с Аяксом для сайта на MODx.
Буду очень благодарен. Спасибо!

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

Я вот знаю только как загружать комментарии через Ajax, а вот как добавлять через Ajax, нужно подумать

--> Подпишитесь --> --> --> Подписаться --> -->

Остались вопросы? звоните

Данное соглашение об обработке персональных данных разработано в соответствии с законодательством Российской Федерации.

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

Под персональными данными Гражданина понимается нижеуказанная анкетная и биографическая информация:

Общая информация (Ф.И.О); Email; номер телефона; Соискатели направляют свои персональные данные оператору в целях предоставления последним услуги по приему заявок (записи) на консультацию по разработке сайта.

Гражданин, принимая настоящее Соглашение, выражают свою заинтересованность и полное согласие, что обработка их персональных данных может включать в себя следующие действия: сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование

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

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