我的网站上的模态系统有问题。现在我将为您提供一些代码：
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脚本创建时，会出现上面提到的控制台错误。当我手动包含模态代码(示例用法中注释的模态模板(时，不会出现控制台错误。
有人知道我该如何解决这个问题吗？
编辑ALPHA
我忘记了我使用函数来创建<头部>。您可以确保所有必需的脚本都包含在内。
当您调用<?php AlertGenerator::displayModal(); AlertGenerator::showAlert();[...]时，您会得到模式HTML和echo '<script>showModal("' . $title . '", "' . $content . '");</script>';的结果。
当页面加载时，<script>showModal(...)</script>部分会在页面加载完成之前运行。showModal()访问title，但尚未设置！title仅在页面加载后设置，即在jQuery的$.ready()回调中设置。