Как создать пользовательскую коробку подтверждения с Bootstrap4 и ES6

Автор оригинала: FreeCodeCamp Community Member.

Прашант Ядав

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

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

Давайте посмотрим, как вы можете создать свой собственный пользовательский подтверждающий ящик с Bootstrap4 и ES6 Отказ

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

Проверьте живую демонстрацию здесь Отказ

• Мы собираемся использовать модаль Bootstrap4 для создания всплывающего окна.
• Мы будем использовать JavaScript Обратный вызов Функция для обработки ответа.
• Поскольку Bootstrap имеет зависимость jQuery, мы будем использовать его для событий.

#Bootstrap Модальные методы

.Modal (варианты): активирует контент в виде модала с параметрами ниже.

.Modal («Toggle»): показывает или скрывает модал на основе его текущего состояния.

.Modal («Show»): открывает модаль.

.Modal («Скрыть»): скрывает модал.

# Sootstrap модальные опции

{backhoe: true или false, по умолчанию: true}: Должен ли модаль скрыть при щелчке за пределами модала.

{Клавиатура: true или false, по умолчанию: true}: Должен ли модаль скрыть, когда нажата кнопка клавиатуры.

{Show: True или False, по умолчанию: TRUE}: чтобы показать модаль при инициализации.

#Bootstrap модальные события

.on (‘show.bs.modal’): когда модаль собирается отображаться, но его еще не показано.

.on («Shift.bs.modal»): когда отображается модал.

.on («Hide.bs.modal»): когда модаль собирается скрыть, но он еще не скрыт.

.on (‘hidden.bs.modal’): когда модал скрыт.

Зависимости

Импортируйте все зависимости с использованием CDN.

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

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

. Тогда мы создадим две кнопки под ним с помощью разных CL Освы Б TN-YE S и BTN-NO, который будет использоваться для обработки ответа.

Объяснение

• Мы создали Функция который принимает сообщение и обратный вызов обработчик Отказ
• В этом мы добавляем модаль в конце Тело Тег с jQuery’s Приложение метод.
• После добавления модала мы запускаем или показываем модаль с помощью Bootstrap модал метод. Мы также передаем два параметра {Фон: «Статическое», клавиатура: false} Что мешает модальному сокрытию со событиями клавиатуры, как нажатие Esc кнопка или нажатие на область фона.
• Мы проверяем, скрыто ли модал с Bootstrap hidden.bs.modal И тогда мы снимаем модаль с jQuery Удалить метод. Это помешает ему добавлять модаль каждый раз.

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

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

Обработка ответа

Объяснение

Если Да или нет кнопка нажата, то мы проходим правда или ложь к функции обратного вызова и называть ее. После этого мы скрываем модаль.

Мы можем позвонить нашему коробку подтверждения, как это, куда бы мы ни хотели.

Проверьте живую демонстрацию здесь Отказ

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

Если вам понравилась эта статья, пожалуйста, дайте ей? И поделитесь этим! Если у вас есть какие-либо вопросы, связанные с этим, не стесняйтесь спрашивать меня.

Для большего количества таких и алгоритмических решений в JavaScript следуйте за мной на Twitter Отказ Я пишу о ES6 , Реагировать, nodejs, Структуры данных и Алгоритмы на Nearnersbucket.com Отказ