WHMCS Logam2框架实现淡入淡出弹窗

<div id='popup' class='popup'>
  <div class='popup-content'>
    <h2>这是一个弹窗</h2>
    <p>欢迎使用WHMCS Logam2框架！</p>
    <button onclick='hidePopup()'>关闭</button>
  </div>
</div>
<script>
function showPopup() {
  var popup = document.getElementById('popup');
  popup.style.display = 'block';
  setTimeout(function() {
    popup.style.opacity = '1';
  }, 100);
}

function hidePopup() {
  var popup = document.getElementById('popup');
  popup.style.opacity = '0';
  setTimeout(function() {
    popup.style.display = 'none';
  }, 600);
}

document.addEventListener('DOMContentLoaded', showPopup);
</script>
<ol start="2">
<li>在你的WHMCS模板文件中，找到需要弹出窗口的位置，并添加以下代码：</li>
</ol>
<pre><code class="language-php">&lt;?php include('popup.php'); ?&gt;
</code></pre>
<ol start="3">
<li>将popup.php文件上传到你的WHMCS模板文件夹中。</li>
</ol>
<p>这样，当用户访问你的WHMCS网站时，将会以淡入淡出的效果显示一个弹窗。</p>