制作模态 |弹出窗口 - 如果内容发生更改，则重新出现

问：

我有点卡住了，我开发了一个带有选项页面的自定义 Wordpress 主题，客户可以在其中更新弹出窗口/模态的标题和正文副本。

我使用 ACF 为 FOOTER 收集这些数据。PHP 模板文件。我在哪里添加了 html 标记。

我的模态 Javascript 在我的 .js 文件中，由我的 FUNCTIONS.php 排队（参见下面的代码）。

迄今。。。我已经设法在设定的时间段内（使用 localStorage）将模式设置为 window.onload（打开）和 onclick（关闭）。目前 20 000 毫秒用于测试目的，但我会在测试完成后将其增加到 3-4 小时。

到目前为止 - 一切都很好，一切都在工作。

但是，客户还希望在更改 Wordpress 数据库中的文本后立即重新出现该模式。（例如。如果停车场已满 - 模态会弹出以立即提醒客户 - 即使他们最近在 localStorage 时间允许范围内关闭了模态。

因此，我需要一种方法让浏览器查看标题或段落文本已更改并更改/重置localStorage。

我正在尝试添加一个 MutationObserver 来处理这个问题，但我这样做有点迷茫。这是最好的方法吗，任何人都可以帮忙吗？

PHP的

<?php
// Options Page Variables
$headline = get_field( 'modal_headline', 'options' );
$copy = get_field( 'modal_copy', 'options' );

if ( $headline && $copy ): { ?>
    <!-- Overlay -->
    <div class="modal-overlay" id="modalOverlay">
        <!-- Content -->
        <div class="modal">
            <!-- Headline -->
            <div class="modal-headline-wrapper">
                <h2><?php echo $headline; ?></h2>
            </div>
            <!-- Message -->
            <div class="modal-paragraph-wrapper">
                <p>Hello text <?php echo $copy; ?></p>
            </div>
            <!-- Close Modal -->
            <div class="modal-button-wrapper">
                <button class="centered-button" onclick="closeModal()">Close</button>
            </div>
        </div>
    </div>
   <?php } endif; ?>

CSS的

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 100;
    animation: animated-modal-in 0.35s forwards;
}
.modal {
    @include flex-center();
    flex-direction: column;
    width: 90%;
    min-height: 25vh;
    max-width: 600px;
    background: #fff;
    padding: 50px 25px;
    text-align: center;
    animation: animated-modal-in 0.75s forwards;
}

JS系列

// To Open The Modal
function openModal() {
    document.getElementById('modalOverlay').style.display = 'flex';
}

// To Close The Modal
function closeModal() {
    document.getElementById('modalOverlay').style.display = 'none';
    // Store The Current Timestamp In LocalStorage When The Modal Closes
    var closedTimestamp = new Date().getTime();
    localStorage.setItem('modalClosedTimestamp', closedTimestamp);
}

// Check If The Modal Should Be Displayed On Page Load
window.onload = function () {
    // Retrieve The Stored Timestamp | When The Modal Was Closed
    var closedTimestamp = localStorage.getItem('modalClosedTimestamp');
    // If The Modal Hasn't Been Closed | Or It Has Been More Than Set Time
    if (!closedTimestamp || new Date().getTime() - closedTimestamp > 20000) {
        openModal();
    }
};