typecho加弹窗

陌路离殇
2024-10-26 / 0 评论 / 8 阅读 / 正在检测是否收录...

1.找到你的Typecho主题的模板文件(通常在 usr/themes/[你的主题名]/ 目录下)。

2.编辑你的主题的 footer.php 文件,在合适的位置(通常在页面底部)添加以下代码:

<?php if (!isset($_COOKIE['displayPopup']) || $_COOKIE['displayPopup'] != 'yes'): ?>
    <script>
        function openPopup() {
            document.getElementById('popup').style.display = 'block';
            document.getElementById('fade').style.display = 'block';
        }
 
        function closePopup() {
            document.getElementById('popup').style.display = 'none';
            document.getElementById('fade').style.display = 'none';
            var expires = new Date();
            expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000)); // 设置Cookie保存1天
            document.cookie = "displayPopup=yes; expires=" + expires.toUTCString() + "; path=/";
        }
 
        window.onload = function() {
            openPopup(); // 页面加载时显示弹窗
        };
    </script>
 
    <div id="popup" style="display:none; width:500px; height:300px; position:fixed; top:50%; left:50%; margin-left:-250px; margin-top:-150px; z-index:1001;">
        <a href="javascript:void(0)" onclick="closePopup()" style="float:right;">关闭</a>
        <img src="your_popup_image.jpg" width="500" height="300" />
    </div>
    <div id="fade" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:1000;"></div>
<?php endif; ?>

3.将 your_popup_image.jpg 替换为你想要显示的弹窗内容的图片地址。

4.如果你想要关闭弹窗后不再显示,确保你有正确设置Cookie。

这段代码会在用户访问网站时加载弹窗,并在用户关闭弹窗后设置一个Cookie,使得用户在接下来的24小时内不会再看到弹窗。这是一个简单的实现,你可以根据需要添加更多的样式和功能。


本文共1313个字符,其中有 182 个汉字,平均阅读时长 ≈ 5分钟
0

打赏

海报

正在生成.....

评论

博主关闭了所有页面的评论