引入Sweetalert后网站出现空白区域问题求助

架构老林

2026-7-7

引入Sweetalert2后页面布局异常问题排查与解决

问题情况

学校项目页面引入Sweetalert2后，弹窗功能正常，但页面布局出现异常：

未使用Sweetalert2时的页面：
使用Sweetalert2后的页面：

点击页脚的www.copyright.com文本会触发弹窗，空白区域延伸至表格位置。页面依赖flex: 1;实现内容全屏铺满，自行排查未找到解决办法，疑似CSS冲突导致。

相关代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OnlineBrokers</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="icon" href="pictures/pillar_icon.png">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <header>
        <div class="title">
            <h1 class="centered-content">
                <img src="pictures/pillar.png" class="titlePicture">
                <span class="pageTitle">ONLINE</span>
                <span class="pageTitle2">BROKERS</span>
            </h1>
        </div>
    </header>
    <hr class="hrTitle">
    <div class="main">
        <div class="stocks" id="stocks">
            <table class="stockTable">
                <tr class="names">
                    <td class="stockInfo">Instrument</td>
                    <td class="stockInfo">Value</td>
                    <td class="stockInfo">Gain</td>
                    <td class="stockInfo">%</td>
                </tr>
                <tr>
                    <td class="stockName">SMCI<br><span class="stockNameLong">Super Micro Computer Inc.</span></td>
                    <td class="stock" id="numberSMCI"></td>
                    <td class="stock" id="numSMCI"></td>
                    <td class="stock" id="proSMCI"></td>
                </tr>
                <tr>
                    <td class="stockName">TSLA<br><span class="stockNameLong">Tesla Motors</span></td>
                    <td class="stock" id="numberTSLA"></td>
                    <td class="stock" id="numTSLA"></td>
                    <td class="stock" id="proTSLA"></td>
                </tr>
                <tr>
                    <td class="stockName">AMZN<br><span class="stockNameLong">Amazon.com, Inc.</span></td>
                    <td class="stock" id="numberAMZN"></td>
                    <td class="stock" id="numAMZN"></td>
                    <td class="stock" id="proAMZN"></td>
                </tr>
                <tr>
                    <td class="stockName">MSFT<br><span class="stockNameLong">Microsoft Corp.</span></td>
                    <td class="stock" id="numberMSFT"></td>
                    <td class="stock" id="numMSFT"></td>
                    <td class="stock" id="proMSFT"></td>
                </tr>
                <tr>
                    <td class="stockName">BTC<br><span class="stockNameLong">Bitcoin</span></td>
                    <td class="stock" id="numberBTC"></td>
                    <td class="stock" id="numBTC"></td>
                    <td class="stock" id="proBTC"></td>
                </tr>
                <tr>
                    <td class="stockName">XRP<br><span class="stockNameLong">Ripple</span></td>
                    <td class="stock" id="numberXRP"></td>
                    <td class="stock" id="numXRP"></td>
                    <td class="stock" id="proXRP"></td>
                </tr>
            </table>
        </div>
        <div class="portfolio">
            <h2 class="portTitle">PORTFOLIO</h2>
        </div>
    </div>
    <hr class="hrFooter">
    <footer>
        <h5><span id="copyright">© www.copyright.com</span></h5>
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    background-color: #121212;
}

.title {
    text-align: center;
    font-size: 23px;
    color: white;
    padding: 15px 0;
    font-family: sans-serif;
}

.titlePicture {
    margin-right: 10px;
}

.centered-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageTitle {
    font-weight: 100;
    margin-right: 5px;
}

.pageTitle2 {
    font-weight: bold;
}

.hrTitle {
    border-top: 2px solid red;
    border-bottom: 1px solid red;
}

.main {
    flex: 1;
    background-color: #1d1d1d;
    color: white;
    display: flex;
    flex-wrap: wrap;
}

.stocks {
    width: 60%;
    font-family: sans-serif;
    padding-top: 10px;
}

.titleStocks {
    font-weight: 100;
    text-align: center;
}

.stockTable {
    width: 100%;
    height: max-content;
    border-collapse: collapse;
}

.stockInfo{
    padding-left: 15PX;
    padding-bottom: 5px;
    font-size: 13px;
}

tr:hover:not(.names) {
    background-color: #292929;
}

.names {
    font-size: 15px;
    color: #8d8d8d;
}

.stockName, .stock {
    height: 75px;
    padding-left: 15px;
    border-top: #292929 solid 2px;
}

.stockName {
    width: 40%;
}

.stockNameLong{
    font-size: 15px;
    color: #8d8d8d;
}

.stock {
    width: 20%;
}

.portfolio {
    width: 40%;
    padding-left: 17px;
    padding-top: 5px;
    border-left: #292929 solid 2px;
}

.portTitle{
    font-family: sans-serif;
    font-weight: 100;
    font-size: 30px;
}

footer {
    text-align: center;
    background-color: #121212;
    color: white;
    font-family: sans-serif;
}

.hrFooter {
    border: 1px solid red;
}

@media screen and (max-width: 992px) {
    .stocks, .portfolio {
        width: 100%;
    }
    .stockName, .chg, .stock {
        height: 150px;
        padding-left: 15px;
        font-size: 30px;
        border-top: #292929 solid 2px;
    }
    .stockInfo{
        padding-left: 15PX;
        padding-bottom: 5px;
        font-size: 20px;
    }
    .stockNameLong{
        font-size: 20px;
    }
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("copyright").addEventListener("click", cFunction);
});

function cFunction() {
  Swal.fire({
    title: '&lt;span style="color: white;"&gt;Credits!&lt;span&gt;',
    html: '&lt;div style=line-height: 25px;"&gt;&lt;span style="color: white;"&gt;Author: Jaša Gregorič&lt;br&gt;Date: November 2023&lt;br&gt;Mentor: Boštjan Vouk&lt;/span&gt;&lt;/div&gt;',
    icon: 'info',
    confirmButtonText: 'OK',
    iconColor: 'white',
    background: '#1d1d1d'
  });
}

问题原因

Sweetalert2在弹窗显示时，会自动给body添加swal2-shown类，并修改body的display和overflow属性，这会破坏你原本依赖的flex布局结构，导致页面元素错位、空白区域出现。

解决办法

方法1：通过Sweetalert2钩子恢复body样式

修改弹窗调用代码，在弹窗打开和关闭时手动保存并恢复body的原始样式：

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("copyright").addEventListener("click", cFunction);
});

function cFunction() {
  // 保存body原有样式
  const originalDisplay = document.body.style.display;
  const originalOverflow = document.body.style.overflow;

  Swal.fire({
    title: '<span style="color: white;">Credits!</span>', // 修复未闭合的span标签
    html: '<div style="line-height: 25px;"><span style="color: white;">Author: Jaša Gregorič<br>Date: November 2023<br>Mentor: Boštjan Vouk</span></div>',
    icon: 'info',
    confirmButtonText: 'OK',
    iconColor: 'white',
    background: '#1d1d1d',
    // 弹窗打开时恢复body布局
    didOpen: () => {
      document.body.style.display = originalDisplay || 'flex';
      document.body.style.overflow = originalOverflow || 'auto';
    },
    // 弹窗关闭后再次确保样式正确
    willClose: () => {
      document.body.style.display = originalDisplay || 'flex';
      document.body.style.overflow = originalOverflow || 'auto';
    }
  });
}

方法2：用CSS强制覆盖Sweetalert2的全局样式

在你的自定义CSS末尾添加以下代码，阻止Sweetalert2修改body的flex布局：

/* 强制保留body的flex布局 */
body.swal2-shown {
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
}

/* 确保弹窗层级正确，不被页面元素遮挡 */
.swal2-container {
  z-index: 9999 !important;
}

额外修复

注意到你代码中Sweetalert的title里的<span>标签未闭合，这可能导致渲染异常，已在方法1的代码中修复。

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

引入Sweetalert后网站出现空白区域问题求助

问题情况 #

相关代码 #

HTML #

CSS #

JavaScript #

问题原因 #

解决办法 #

方法1：通过Sweetalert2钩子恢复body样式 #

方法2：用CSS强制覆盖Sweetalert2的全局样式 #

额外修复 #