WHMCS 模板框架淡入淡出弹窗示例代码
下面是一个使用 WHMCS 模板框架编写的淡入淡出弹窗的示例代码：
在你的 WHMCS 主题文件夹中的'header.tpl'文件中添加以下代码：
<head>
<style>
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 9999;
}
#popup.show {
display: block;
opacity: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var popup = document.getElementById('popup');
if (popup) {
popup.classList.add('show');
setTimeout(function() {
popup.classList.remove('show');
}, 5000); // 5秒后关闭弹窗
}
});
</script>
</head>
然后在你的 WHMCS 主题文件夹中的'header.tpl'文件的适当位置添加以下代码：
<div id="popup">
<p>这是一个弹窗示例。</p>
</div>
这段代码会在页面加载后显示一个带有文本内容的弹窗，并在5秒后淡出关闭。
你可以根据需要自定义弹窗的样式和内容。
原文地址: https://www.cveoy.top/t/topic/bFU9 著作权归作者所有。请勿转载和采集!