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

Метод 1: использование библиотеки SweetAlert
Самый простой способ создать оповещение с двумя кнопками — использовать библиотеку SweetAlert. Вот пример:

Swal.fire({
  title: 'Confirmation',
  text: 'Are you sure you want to proceed?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Yes',
  cancelButtonText: 'No'
}).then((result) => {
  if (result.isConfirmed) {
    // Code to execute when "Yes" button is clicked
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    // Code to execute when "No" button is clicked
  }
});

Метод 2: настраиваемое модальное диалоговое окно
Если вы предпочитаете более индивидуальный подход, вы можете создать модальное диалоговое окно с двумя кнопками, используя HTML, CSS и JavaScript. Вот пример:

<div id="custom-modal">
  <h2>Confirmation</h2>
  <p>Are you sure you want to proceed?</p>
  <button id="confirm-button">Yes</button>
  <button id="cancel-button">No</button>
</div>
<script>
  const confirmButton = document.getElementById('confirm-button');
  const cancelButton = document.getElementById('cancel-button');

  confirmButton.addEventListener('click', () => {
    // Code to execute when "Yes" button is clicked
  });

  cancelButton.addEventListener('click', () => {
    // Code to execute when "No" button is clicked
  });
</script>

Метод 3: модальный режим Bootstrap
Если вы уже используете платформу Bootstrap, вы можете использовать ее модальный компонент для создания диалогового окна с двумя кнопками. Вот пример:

<!-- Include Bootstrap CSS and JavaScript files -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- HTML for the modal -->
<div class="modal" id="confirmation-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirmation</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to proceed?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="confirm-button">Yes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>
<script>
  const confirmButton = document.getElementById('confirm-button');

  confirmButton.addEventListener('click', () => {
    // Code to execute when "Yes" button is clicked
  });
</script>

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