如何在PHP文件中执行JavaScript代码实现popup弹窗正常显示

你的代码报错的核心原因是JavaScript执行时机早于DOM元素加载：PHP输出的JS代码执行时，id为popup的div还没有被浏览器解析到DOM树中，因此document.getElementById只能返回null，无法操作元素。

你可以从以下两种方案中任选一种适配你的代码：

方案1：调整代码输出顺序 #

将PHP输出JS的代码移动到popup的HTML代码之后，确保浏览器先解析DOM元素，再执行JS逻辑：

// 先输出popup的HTML结构
echo '<div class="popup" id="popup">
        <div class="overlay"></div>
        <div class="content">
            <!-- <div class="close-btn" onclick="closePopup()">&times;</div> -->
            <div class="row">
                <div  class="col-lg-12 col-md-9  col-sm-12">
                    <img width="200" height="200" src="https://cdn.dribbble.com/users/2469324/screenshots/6538803/comp_3.gif">
                    <h2 id="errorHead">fields are required</h2>
                    <p id="errorMessage">
                        All fields are required. fill all fields
                    </p>
                    <button style="background-color: darkgreen; width: 130px; margin-top: 5%;" class="btn btn-success radiusChange backgroundChange" onclick="closePopup()"> Close</button>
                </div>
            </div>
        </div>
    </div>';

// 再输出JS逻辑
echo '<script type="text/javascript">
        alert( document.getElementById("popup"));
        document.getElementById("popup").style.display = "block";
        document.getElementById("popup").classList.toggle("active");
</script>';

方案2：添加DOM加载完成监听 #

不需要调整原有代码的位置，将JS逻辑包裹在DOMContentLoaded事件回调中，浏览器会自动等待整个DOM解析完成后再执行逻辑：

echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            alert( document.getElementById("popup"));
            document.getElementById("popup").style.display = "block";
            document.getElementById("popup").classList.toggle("active");
        });
</script>';

• 确认页面内仅存在一个id为popup的元素，id重复会导致元素获取异常
• 检查popup元素的默认CSS样式，如果默认display属性已经为block，可以根据实际需求调整样式规则

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