使用 PHP 脚本显示模式的问题答案

【问题标题】：Problem with displaying a modal using PHP script使用 PHP 脚本显示模式的问题
【发布时间】：2020-11-27 20:46:51
【问题描述】：

我的网站上的模式系统有问题。现在我将提供一些代码：

MODALS ARE MADE WITH W3.CSS LIB

modal.js（带有一些调试）

let modal = null;
let title = null;
let content = null;

$(document).ready(() =>
{
    modal = $('#modal');
    title = $('#modal-title');
    content = $('#modal-content');

    if(modal == null)
    {
        console.log('aa');
    }
    if(title == null)
    {
        console.log('bb');
    }
    if(content == null)
    {
        console.log('cc');
    }
});

function showModal(modalTitle, modalText)
{
    title.text(modalTitle);
    content.text(modalText);
    modal.show();
}

function hideModal()
{
    modal.hide();
}

模态 HTML 模板

<div id="modal" class="w3-modal">
    <div class="w3-modal-content">
        <div style="display: block;" class="fir-light-purple">
            <div class="w3-container">
                <h2 id="modal-title">{TITLE}</h2>
            </div>
        </div>
        <br>
        <div class="w3-container">
            <span id="modal-content">{CONTENT}</span>
        </div>
        <br>
        <div style="text-align: center" class="fir-light-purple">
            <div class="w3-container">
                <h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br>
            </div>
        </div>
    </div>
</div>

AlertGenerator.php（显示模式的脚本）

<?php

//Current modal code
//<div id="modal" class="w3-modal"><div class="w3-modal-content"><div style="display: block;" class="fir-light-purple"><div class="w3-container"><h2 id="modal-title">{TITLE}</h2></div></div><br><div class="w3-container"><span id="modal-content">{CONTENT}</span></div><br><div style="text-align: center" class="fir-light-purple"><div class="w3-container"><h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br></div></div></div></div>

/*
Pretty code:

<div id="modal" class="w3-modal">
    <div class="w3-modal-content">
        <div style="display: block;" class="fir-light-purple">
            <div class="w3-container">
                <h2 id="modal-title">{TITLE}</h2>
            </div>
        </div>
        <br>
        <div class="w3-container">
            <span id="modal-content">{CONTENT}</span>
        </div>
        <br>
        <div style="text-align: center" class="fir-light-purple">
            <div class="w3-container">
                <h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br>
            </div>
        </div>
    </div>
</div>

 */

class AlertGenerator
{
    public static function createAlert(string $title, string $content)
    {
        self::validateSession();
        $_SESSION['alert']['title'] = $title;
        $_SESSION['alert']['content'] = $content;
    }

    public static function displayModal()
    {
        echo '<div id="modal" class="w3-modal"><div class="w3-modal-content"><div style="display: block;" class="fir-light-purple"><div class="w3-container"><h2 id="modal-title">{TITLE}</h2></div></div><br><div class="w3-container"><span id="modal-content">{CONTENT}</span></div><br><div style="text-align: center" class="fir-light-purple"><div class="w3-container"><h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br></div></div></div></div>' . PHP_EOL;
    }

    public static function showAlert()
    {
        self::validateSession();
        if(array_key_exists('alert', $_SESSION))
        {
            if(!array_key_exists('title', $_SESSION['alert']) || !array_key_exists('content', $_SESSION['alert'])) return;

            $title = addslashes($_SESSION['alert']['title']);
            $content = addslashes($_SESSION['alert']['content']);

            if(empty($title) || empty($content)) return;

            echo '<script>showModal("' . $title . '", "' . $content . '");</script>';
        }
    }

    private static function validateSession()
    {
        session_start();
    }
}

使用示例：

<html>
<head>
    <?php HeadGenerator::generate('Login', true); ?>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="/includes/js/loginForm.js"></script>
</head>
<body>

<?php AlertGenerator::displayModal(); AlertGenerator::showAlert(); NavBarGenerator::defaultNav(); ?>

<div class="w3-container">
    [... website content ...]
</div>

<script>showModal('test', 'test of modal');</script>

</body>
</html>

示例用法只在底部使用创建模态。

这是我收到的错误：Uncaught TypeError: can't access property "text", title is null

我在 .js 文件中的调试函数不发送任何输出。

我的期望

我想在 showModal(x, y) 函数之后立即显示模态。

补充说明：

当 PHP 脚本创建模态代码时，会出现上面提到的控制台错误。当我手动包含模态代码时（示例用法中注释模态模板），不会出现控制台错误。

有谁知道我该如何解决这个问题？

编辑阿尔法

我忘记了我使用函数来创建

。您可以确保包含所有必需的脚本。

【问题讨论】：

我不确定如何理解“示例用法仅在底部使用创建模式。”。在页面底部？使用底部方法？
底部有一个带有showModal()函数的

标签： javascript php html jquery css

【解决方案1】：

当您调用 <?php AlertGenerator::displayModal(); AlertGenerator::showAlert();[...] 时，您会得到模态 HTML 和 echo '<script>showModal("' . $title . '", "' . $content . '");</script>'; 的结果并排在一起。

当页面加载时，<script>showModal(...)</script> 部分在页面完成加载之前运行。 showModal() 访问 title 但尚未设置！ title 仅在页面加载后设置，即在 jQuery 的 $.ready() 回调中。

【讨论】：

我用第二个函数来调试东西，是的，我没有想到这个。感谢朋友的帮助。