Как размыть фон в SweetAlert2: несколько методов с примерами кода - Fcodenotes

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

Метод 1: использование CSS для применения эффекта размытия
Самый простой способ размыть фон при открытии диалогового окна SweetAlert2 — применить к странице эффект размытия CSS. Это можно сделать, добавив класс CSS к элементу body при открытии диалогового окна. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <style>
    .blur {
      filter: blur(5px);
    }
  </style>
</head>
<body>
  <button onclick="openDialog()">Open Dialog</button>
  <script>
    function openDialog() {
      document.body.classList.add('blur');
      Swal.fire({
        // SweetAlert2 dialog configuration
        title: 'Dialog Title',
        text: 'Dialog Content',
        // ...
        onClose: function() {
          document.body.classList.remove('blur');
        }
      });
    }
  </script>
</body>
</html>

В этом примере мы добавляем класс blurк элементу body при открытии диалогового окна, что применяет эффект размытия ко всей странице. Когда диалог закрывается, мы удаляем класс, чтобы восстановить первоначальный вид.

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Adjust the transparency as needed */
      z-index: 9999;
    }
  </style>
</head>
<body>
  <button onclick="openDialog()">Open Dialog</button>
  <div id="overlay"></div>
  <script>
    function openDialog() {
      document.getElementById('overlay').classList.add('overlay');
      Swal.fire({
        // SweetAlert2 dialog configuration
        title: 'Dialog Title',
        text: 'Dialog Content',
        // ...
        onClose: function() {
          document.getElementById('overlay').classList.remove('overlay');
        }
      });
    }
  </script>
</body>
</html>

В этом примере мы создаем элемент наложения с классом overlayи фиксируем его по всей странице. Цвет фона rgba(0, 0, 0, 0.5)создает полупрозрачное черное наложение. Когда диалог закрывается, мы удаляем класс, чтобы скрыть наложение.

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-dialog-container {
      backdrop-filter: blur(5px);
    }
  </style>
</head>
<body>
  <button onclick="openDialog()">Open Dialog</button>
  <script>
    function openDialog() {
      Swal.fire({
        // SweetAlert2 dialog configuration
        title: 'Dialog Title',
        text: 'Dialog Content',
        customClass: {
          container: 'custom-dialog-container'
        }
      });
    }
  </script>
</body>
</html>

В этом примере мы определяем собственный класс CSS .custom-dialog-container, который применяет эффект размытия с помощью свойства backdrop-filter. Затем мы устанавливаем параметр customClassв конфигурации SweetAlert2, чтобы применить наш пользовательский класс к контейнеру диалогового окна.

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