{card-describe title=”说明”}
今天就来实现给网站添加一个免责声明+隐私政策的告知弹窗的功能
{/card-describe}

{mtitle title=”前言“/}

{callout color=”#80ff80″}
随着移动互联网的日益发展，越来越多的人开始使用手机或平板电脑访问网站。这使得网站也需要添加一些免责声明或隐私条款，以保护自己和用户的权益
那么怎么实现在用户进入网站时第一时间告知呢！
今天就来添加一个免责声明+隐私政策的告知弹窗！
{/callout}

{mtitle title=” 第一步 “/}

首先把一下代码放在index.php

将代码放置在 标签后，即刚开始的位置

文件路径：

1. /usr/themes/Joe
2. /usr/themes/Joe-master

{tabs}
{tabs-pane label=”位置”}

{/tabs-pane}
{tabs-pane label=”代码”}

<!--弹窗代码位置-->
   <div class="popup-overlay">
   <div class="popup-box">
       <h2>免责声明</h2>
       <p>您正在访问本站，请您仔细阅读以下条款并确认：</p>
       <ul>
           <li>本站所有文章仅代表作者个人观点，不代表本站立场。</li>
           <li>本站不保证所提供的信息的准确性、完整性、有效性或实时性。</li>
           <li>本站将不会为任何为基于这些信息或其拖累而引发的任何损失或损害承担责任。</li>
       </ul>
       <div class="popup-buttons">
           <button class="agree-button">果断同意</button>
           <button class="disagree-button">查看详细</button>
       </div>
   </div>
</div>
       <!--弹窗代码位置-->

{/tabs-pane}
{/tabs}

{mtitle title=” 第二步 “/}

将所需的js代码放在index.php

将代码放置在 标签之前，即 的上一行即可

文件路径：

1. /usr/themes/Joe
2. /usr/themes/Joe-master

{tabs}
{tabs-pane label=”位置”}

{/tabs-pane}
{tabs-pane label=”代码”}

<!--js弹窗检测-->
<script>
var agreeButton = document.querySelector(".agree-button");
var disagreeButton = document.querySelector(".disagree-button");
var popupOverlay = document.querySelector(".popup-overlay");
var popupBox = document.querySelector(".popup-box");

function showPopup() {
    //显示免责声明弹窗
    popupOverlay.style.display = "flex";
}

function agree() {
    //点击同意按钮，关闭弹窗
    popupOverlay.style.display = "none";
}

function disagree() {
    //点击不同意按钮，禁止进入网站
    window.location.href = "https://www.heylie.cn/ac";
//这个是一个简易的API，里面包含了隐私政策和免责声明！
}

showPopup();
agreeButton.onclick = agree;
disagreeButton.onclick = disagree;
</script>

{/tabs-pane}
{/tabs}

{mtitle title=” 第三步 “/}

创建一个叫 ac.css 的文件

{tabs}
{tabs-pane label=”位置”}

{/tabs-pane}
{tabs-pane label=”代码”}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
     z-index: 999; /* 将 z-index 设置为较低的值 */
}

.popup-box {
    display:flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    width: 30%;
    height: auto;
    padding: 20px;
    border-radius: 4px;
}

.popup-box h2 {
    font-size: 28px;
    margin-top: 0px;
    text-align: center;
}

.popup-box p {
    font-size: 16px;
    line-height: 24px;
    margin: 10px 0px;
    text-align: center;
}

.popup-box ul {
    list-style-type: square;
    margin: 10px 30px;
    padding: 0;
}

.popup-box li {
    margin: 10px 0px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.popup-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}

.agree-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #00cc00;
    color: #fff;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

.disagree-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

{/tabs-pane}
{/tabs}

{mtitle title=”最后一步“/}

在网站的全局设置中 head 引入css文件即可

{tabs}
{tabs-pane label=”joe”}

<!-- 弹窗代码引入开始 -->
<link rel="stylesheet" href="/usr/themes/Joe/assets/css/ac.css">
<!-- 弹窗代码引入结束 -->

{/tabs-pane}
{tabs-pane label=”Joe-master”}

 <!-- 弹窗代码引入开始 -->
<link rel="stylesheet" href="/usr/themes/Joe-master/assets/css/ac.css">
<!-- 弹窗代码引入结束 -->

{/tabs-pane}
{/tabs}

{message type=”info” content=”现在你的网站中有一个免责声明弹窗了”/}

版权声明

   站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供网络资源分享服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时，保证优秀的服务质量。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。