SweetAlert2技术问询：如何为警告框实现响应式图片切换

Hey there! Great question—making SweetAlert2 responsive for mobile can be a bit finicky, but we’ve got two straightforward ways to swap that background image based on screen size. Let’s dive in:

Option 1: CSS Media Queries (Clean, CSS-First Approach) #

Since you’re already using a customClass for your alert, we can leverage that to override the background image with media queries. This keeps your JS cleaner and lets CSS handle the responsive logic.

First, update your JS to remove the inline background property (we’ll let CSS take care of it):

$(document).ready(function(){ 
  swal.fire({ 
    position: 'center', 
    customClass: 'swal-height', 
    showConfirmButton: false, 
    width: 600, 
    padding: 150, 
    backdrop: 'rgba(10, 10, 10, 0.65)', 
    timer: 10000 
  }); 
});

Then add this CSS to your stylesheet. We’ll set the desktop background by default, then swap it for mobile using a media query:

/* Desktop default */
.swal-height {
  background: #fff url(../custom/media/misc/IMAGE1.jpg) no-repeat !important;
}

/* Mobile breakpoint (adjust 768px to match your needs) */
@media (max-width: 768px) {
  .swal-height {
    background: #fff url(../custom/media/misc/IMAGE2.jpg) no-repeat !important;
    width: 300px !important; /* Optional: Shrink alert width for mobile */
    padding: 75px !important; /* Optional: Adjust padding to match smaller image */
  }
}

The !important flag is needed here because SweetAlert2 injects inline styles, which have higher priority than external CSS.

Option 2: JavaScript Dynamic Detection (Great for Dynamic Adjustments) #

If you prefer handling the logic directly in JS, you can check the window width before initializing the alert and swap the image (and other properties) dynamically:

$(document).ready(function(){ 
  // Define your mobile breakpoint (adjust as needed)
  const mobileBreakpoint = 768;
  const isMobile = window.innerWidth <= mobileBreakpoint;

  // Set values based on screen size
  const bgImage = isMobile 
    ? '../custom/media/misc/IMAGE2.jpg' 
    : '../custom/media/misc/IMAGE1.jpg';
  const alertWidth = isMobile ? 300 : 600;
  const alertPadding = isMobile ? 75 : 150;

  swal.fire({ 
    position: 'center', 
    customClass: 'swal-height', 
    showConfirmButton: false, 
    width: alertWidth, 
    padding: alertPadding, 
    background: `#fff url(${bgImage}) no-repeat`, 
    backdrop: 'rgba(10, 10, 10, 0.65)', 
    timer: 10000 
  }); 
});

Bonus: If you want to handle window resizes (like when a user rotates their phone), you can wrap this logic in a resize event listener, but for most cases, initial detection works perfectly.

Quick Tips #

• Make sure IMAGE2 is sized appropriately for mobile (e.g., 300x300px) to avoid stretching or overflow.
• Test different breakpoints (576px for small phones, 768px for tablets) to match your target devices.
• If using the CSS method, ensure your stylesheet loads after SweetAlert2’s default styles to avoid conflicts.

内容的提问来源于stack exchange，提问作者DANIEL