使用 sweetalert 在我的网站中创建一个空白区域

问题描述 投票：0回答：1

我正在为一个学校项目制作这个表单，我添加了 JS Sweetalert，它工作正常，但它与我的 HTML 混淆了。

这是 Sweetaletr 之前的网站

这是我使用 Sweetalert 后的效果

它的工作原理是，当我按下文本www.copyright.com时，Sweetalert就会弹出。 它必须与 CSS 做一些事情。我尝试寻找解决方案，但找不到。

空白区域一直延伸到我的桌子。为了覆盖整个屏幕，我使用 

flex: 1;

这是我的 main.js 代码：

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

function cFunction() {
  Swal.fire({
    title: '<span style="color: white;">Credits!<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'
  });
}

这是我的 main.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;
    }
}

这是我的 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>
    function refreshContent() {
        $.ajax({
            type: "GET",
            url: "content.php?_=" + new Date().getTime(),
            dataType: "json",
            success: function (data) {
                $("#numberSMCI").text(data.SMCI.number);
                $("#numSMCI").html(data.SMCI.gain);
                $("#proSMCI").html(data.SMCI.percentage);

                $("#numberTSLA").text(data.TSLA.number);
                $("#numTSLA").html(data.TSLA.gain);
                $("#proTSLA").html(data.TSLA.percentage);

                $("#numberAMZN").text(data.AMZN.number);
                $("#numAMZN").html(data.AMZN.gain);
                $("#proAMZN").html(data.AMZN.percentage);

                $("#numberMSFT").text(data.MSFT.number);
                $("#numMSFT").html(data.MSFT.gain);
                $("#proMSFT").html(data.MSFT.percentage);

                $("#numberBTC").text(data.BTC.number);
                $("#numBTC").html(data.BTC.gain);
                $("#proBTC").html(data.BTC.percentage);

                $("#numberXRP").text(data.XRP.number);
                $("#numXRP").html(data.XRP.gain);
                $("#proXRP").html(data.XRP.percentage);

                // Store the data in Local Storage to persist it
                localStorage.setItem('stockData', JSON.stringify(data));
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }

    // Check if there is data in Local Storage and use it if available
    var storedData = localStorage.getItem('stockData');
    if (storedData) {
        var data = JSON.parse(storedData);
        $("#numberSMCI").text(data.SMCI.number);
        $("#numSMCI").html(data.SMCI.gain);
        $("#proSMCI").html(data.SMCI.percentage);
        
        $("#numberTSLA").text(data.TSLA.number);
        $("#numTSLA").html(data.TSLA.gain);
        $("#proTSLA").html(data.TSLA.percentage);

        $("#numberAMZN").text(data.AMZN.number);
        $("#numAMZN").html(data.AMZN.gain);
        $("#proAMZN").html(data.AMZN.percentage);

        $("#numberMSFT").text(data.MSFT.number);
        $("#numMSFT").html(data.MSFT.gain);
        $("#proMSFT").html(data.MSFT.percentage);

        $("#numberBTC").text(data.BTC.number);
        $("#numBTC").html(data.BTC.gain);
        $("#proBTC").html(data.BTC.percentage);

        $("#numberXRP").text(data.XRP.number);
        $("#numXRP").html(data.XRP.gain);
        $("#proXRP").html(data.XRP.percentage);
    }

    refreshContent();
    setInterval(refreshContent, 2000);
</script>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</html>
javascript html css sweetalert
1个回答
0
投票

sweetAlert Css 正在覆盖您的 Css 代码。你需要强制你的 body 和 html 的高度。只需添加这个 

!important
你的 
html,body
Css 代码，它就应该可以工作。我已经测试过了

html, body {
  height: 100% !important;
}

如果有帮助请投票并接受:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.