Вы устали от стандартного поведения всплывающих окон SweetAlert и хотите узнать, как закрывать их нажатием специальной кнопки? Не смотрите дальше! В этой статье мы рассмотрим различные методы достижения этой цели с помощью JavaScript. Так что хватайте редактор кода и приступайте!

Метод 1: использование промисов и прослушивателей событий

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

Swal.fire({
  title: 'Hello!',
  text: 'Close me with a custom button click.',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.cancel) {
    // Handle cancel button click
  } else {
    // Handle custom button click
  }
});

Метод 2. Изменение экземпляров SweetAlert

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

const swalInstance = Swal.fire({
  title: 'Hello!',
  text: 'Close me with a custom button click.',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
});
// Close the popup with a custom button click
const customButton = document.getElementById('custom-button');
customButton.addEventListener('click', () => {
  swalInstance.close();
});

Метод 3: переопределение поведения кнопок SweetAlert по умолчанию

SweetAlert предоставляет возможность переопределить поведение кнопки по умолчанию. Мы можем использовать это, указав специальную функцию для свойства onClickкнопки. Вот пример:

Swal.fire({
  title: 'Hello!',
  text: 'Close me with a custom button click.',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
  buttons: {
    cancel: true,
    custom: {
      text: 'Close',
      value: 'close',
      className: 'custom-button-class',
      closeModal: false,
      onClick: () => {
        // Handle custom button click
        // You can call Swal.close() to manually close the popup
      },
    },
  },
});

Метод 4. Расширение SweetAlert с помощью плагинов

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

Swal.fire({
  title: 'Hello!',
  text: 'Close me with a custom button click.',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
  buttonsStyling: false,
  customClass: {
    cancelButton: 'custom-cancel-button-class',
    confirmButton: 'custom-confirm-button-class',
  },
  buttons: [
    {
      text: 'Cancel',
      className: 'cancel-button-class',
      closeOnClick: true,
      click: () => {
        // Handle cancel button click
      },
    },
    {
      text: 'Close',
      className: 'close-button-class',
      closeOnClick: true,
      click: () => {
        // Handle custom button click
      },
    },
  ],
});

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

Заключение

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

Помните, SweetAlert — это мощный компонент пользовательского интерфейса, предоставляющий множество возможностей настройки. Так что вперед, проявите творческий подход и сделайте свои всплывающие окна еще более удобными для пользователя!