简单实现页面自动跳转引导弹窗

已于 2024-11-18 16:31:55 修改
阅读量1.5k 收藏 10
点赞数 6
分类专栏： 博客 文章标签： html
于 2024-11-18 16:27:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45730223/article/details/143860425
版权

新的博客网站搭建好了，搭建新网站的主要原因也是换域名了，现在的这个域名续费比较花钱，所以就想换一下了，新域名jiumoz.top也挺好听的。但是老域名的站点已经有一些访客了，所以就希望通过引导的方式，引导老站点的用户前往新网站！

原文地址：简单实现页面自动跳转引导

整体需求

  1. 当新用户访问网站时（所有页面），弹出一个提示框，询问是否跳转到指定的网站。
  2. 如果用户选择 确定，则跳转到新网站。
  3. 如果用户选择 取消，则不跳转并关闭弹窗。
  4. 弹窗底部有一个 “不再显示” 的复选框，用户勾选后并点击 取消，未来的 5 天内不会再显示弹窗。

实现步骤

因为自己写代码就是个半吊子，很多东西不懂，所以也是逐步摸索，下面就是尝试过的方案；

使用内置函数弹窗

<script>
    window.onload = function() {
    var userWantsToClose = confirm("即将跳转到新网址");
    if (userWantsToClose) {
        window.location.href = "https://www.jiumoz.top";
    }
};
</script>

效果如下：

image-20241020233848378

ok，上面已经实现基本的需求了，就是进入网站就弹窗提示！

进入网站任意界面都弹窗

需求就是从任何链接进入网站，都可以弹窗提示；

这个其实主要看前端的结构，比如是不是你网站都会加载一个公共的header文件，如果有的话，把上面的js代码嵌入即可实现；

我这里主要是halo 1.x搭建的，所以在系统内设置就可以实现

image-20241021000150507

取消之后不显示

简单思考一下，要实现点击取消后，无论访问网站的哪个页面都不再显示弹窗跳转，我们可以通过在用户的浏览器中设置一个cookie来实现。

<script>
        // 检查cookie是否存在
        function checkCookie() {
            var userWantsToClose = getCookie("userWantsToClose");
            if (userWantsToClose != "yes") {
                var userWantsToClose = confirm("即将跳转到新网址");
                if (userWantsToClose) {
                    window.location.href = "https://www.jiumoz.top";
                    document.cookie = "userWantsToClose=yes;path=/;max-age=86400"; // 设置cookie有效期为一天
                }
            }
        }

        // 获取cookie值
        function getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }

        window.onload = function() {
            checkCookie();
        };
    </script>

优化交互

上面其实已经实现基本的需求了，但是在交互上来看，还不够友好，那么自带的这个弹窗就不太能满足我的需求，最好就是使用 HTML 和 JavaScript 来创建一个自定义的弹窗，并且包含三个按钮（“确认跳转”、“不跳转”和“不再提示”）;

那么这里就肯定需要将 HTML 元素动态生成，CSS 样式通过 JavaScript 内联或插入到页面的 <style> 标签中。

<script>
    // 动态插入CSS样式
    function insertStyles() {
        var style = document.createElement('style');
        style.innerHTML = `
            .modal {
                display: none; 
                position: fixed; 
                z-index: 1; 
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                justify-content: center;
                align-items: center;
            }

            .modal-content {
                background-color: white;
                padding: 20px;
                border-radius: 5px;
                text-align: center;
                width: 300px;
            }

            .modal-content h2 {
                margin-bottom: 20px;
            }

            .modal-buttons {
                display: flex;
                justify-content: space-between;
            }

            .modal-buttons button {
                padding: 10px 20px;
                margin: 5px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }

            .confirm-btn { background-color: #4CAF50; color: white; }
            .cancel-btn { background-color: #f44336; color: white; }
            .no-prompt-btn { background-color: #555; color: white; }
        `;
        document.head.appendChild(style);
    }

    // 动态创建弹窗HTML
    function createModal() {
        var modal = document.createElement('div');
        modal.id = "myModal";
        modal.className = "modal";
        modal.innerHTML = `
            <div class="modal-content">
                <h2>是否跳转到新网站？</h2>
                <div class="modal-buttons">
                    <button class="confirm-btn" οnclick="goToNewWebsite()">确认跳转</button>
                    <button class="cancel-btn" οnclick="closeModal()">不跳转</button>
                    <button class="no-prompt-btn" οnclick="setNoPrompt()">不再提示</button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    // 显示弹窗
    function showModal() {
        document.getElementById("myModal").style.display = "flex";
    }

    // 跳转到新网站的函数
    function goToNewWebsite() {
        window.location.href = "https://www.jiumoz.top";
    }

    // 关闭弹窗的函数
    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }

    // 设置不再提示的cookie
    function setNoPrompt() {
        document.cookie = "userChoice=noPrompt;path=/;max-age=86400"; // cookie 有效期为一天
        closeModal();
    }

    // 获取cookie的值
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    // 页面加载时检查是否显示弹窗
    window.onload = function() {
        var userChoice = getCookie("userChoice");
        if (!userChoice) {
            insertStyles();  // 插入CSS
            createModal();   // 创建HTML
            showModal();     // 显示弹窗
        }
    };
</script>

效果如下：

image-20241021001238124

优化UI

功能基本没问题了，但是这个ui实在是看不过去，简单的设计（抄袭）一下：

image-20241021001856564

Element的这个就很好看，颜色和我旧博客网站的也很贴合，所以就借鉴啦！

有了设计，结合它代码改一下css就行：

.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.el-message-box {
    background-color: #fff;
    width: 400px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.el-message-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.el-message-box__title {
    font-size: 18px;
    color: #303133;
}

.el-message-box__headerbtn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.el-message-box__close {
    color: #909399;
}

.el-message-box__content {
    font-size: 14px;
    color: #606266;
    margin-bottom: 20px;
}

.el-message-box__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.el-checkbox {
    display: flex;
    align-items: center;
}

.el-checkbox input {
    margin-right: 5px;
}

.el-message-box__btns {
    text-align: right;
}

.el-button {
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

.el-button--default {
background-color: #f0f0f0;
color: #606266;
}

    .el-button--primary {
        background-color: #409EFF;
        color: white;
    }

.el-button:hover {
    opacity: 0.85;
}

最终的效果：

在这里插入图片描述

完整实现代码

<script>
    // 动态插入CSS样式
    function insertStyles() {
        var style = document.createElement('style');
        style.innerHTML = `
            .modal {
                display: none; 
                position: fixed; 
                z-index: 1000; 
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                justify-content: center;
                align-items: center;
            }

            .el-message-box {
                background-color: #fff;
                width: 400px;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                animation: fadeIn 0.3s;
            }

            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }

            .el-message-box__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
            }

            .el-message-box__title {
                font-size: 18px;
                color: #303133;
            }

            .el-message-box__headerbtn {
                background: none;
                border: none;
                font-size: 16px;
                cursor: pointer;
            }

            .el-message-box__close {
                color: #909399;
            }

            .el-message-box__content {
                font-size: 14px;
                color: #606266;
                margin-bottom: 20px;
            }

            .el-message-box__footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
            }

            .el-checkbox {
                display: flex;
                align-items: center;
            }

            .el-checkbox input {
                margin-right: 5px;
            }

            .el-message-box__btns {
                text-align: right;
            }

            .el-button {
                border: none;
                padding: 6px 14px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                margin-left: 10px;
            }

            .el-button--default {
                background-color: #f0f0f0;
                color: #606266;
            }

            .el-button--primary {
                background-color: #409EFF;
                color: white;
            }

            .el-button:hover {
                opacity: 0.85;
            }
        `;
        document.head.appendChild(style);
    }

    // 动态创建弹窗HTML
    function createModal() {
        var modal = document.createElement('div');
        modal.id = "myModal";
        modal.className = "modal";
        modal.innerHTML = `
            <div class="el-message-box">
                <div class="el-message-box__header">
                    <div class="el-message-box__title"><span>提示</span></div>
                    <button type="button" class="el-message-box__headerbtn" οnclick="closeModal()">
                        <i class="el-message-box__close">&times;</i>
                    </button>
                </div>
                <div class="el-message-box__content">
                    <p>同名博客已在新域名 <a href="http://blog.jiumoz.top" style="color: #409EFF;">blog.jiumoz.top</a> 上线，是否要跳转到该网站？</p>
                </div>
                <div class="el-message-box__footer">
                    <div class="el-checkbox">
                        <input type="checkbox" id="noPromptCheckbox"> <label for="noPromptCheckbox">不再显示</label>
                    </div>
                    <div class="el-message-box__btns">
                        <button class="el-button el-button--default" οnclick="cancelModal()">取消</button>
                        <button class="el-button el-button--primary" οnclick="goToNewWebsite()">确定</button>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    // 显示弹窗
    function showModal() {
        document.getElementById("myModal").style.display = "flex";
    }

    // 跳转到新网站的函数
    function goToNewWebsite() {
        window.location.href = "https://blog.jiumoz.top";
    }

    // 关闭弹窗的函数
    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }

    // 取消操作，并检查用户是否勾选"不再显示"
    function cancelModal() {
        var noPromptCheckbox = document.getElementById("noPromptCheckbox").checked;
        if (noPromptCheckbox) {
            setNoPrompt();
        }
        closeModal();
    }

    // 设置不再提示的cookie，cookie有效期设为5天
    function setNoPrompt() {
        var d = new Date();
        d.setTime(d.getTime() + (5*24*60*60*1000)); // 5天的毫秒数
        var expires = "expires=" + d.toUTCString();
        document.cookie = "userChoice=noPrompt;path=/;" + expires;
    }

    // 获取cookie的值
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    // 页面加载时检查是否显示弹窗
    window.onload = function() {
        var userChoice = getCookie("userChoice");
        if (!userChoice) {
            insertStyles();  // 插入CSS
            createModal();   // 创建HTML
            showModal();     // 显示弹窗
        }
    };
</script>

功能点说明

跳转需求不同，还是有不同的方式的，这里主要就是要和用户有一个交互的过程，所以需要有弹窗、确认的这个过程，主要的点就包括：

  1. 不再显示功能：用户勾选"不再显示"选项后，点击 取消 将会设置一个有效期为5天的 cookie。在5天内，用户再次访问网站时不会再看到弹窗。
  2. 跳转逻辑：点击 确定 后，用户将直接跳转到指定的新网站。
  3. 界面设计：整体界面遵循了 Element UI 风格，布局简洁，按钮操作明显。
Android ：页面停留3秒后自动跳转登录界面
weixin_68946227的博客
05-08 4525
第一步：先创建一个Android项目页面首字母要大写
鸿蒙5.0&next开发【基于DialogHub的通用弹窗解决方案】UI开发框架
zhenggaoxiao232的博客
02-19 891
在HarmonyOS开发中，弹窗是每个应用都会遇到的场景，其重要性不容忽视。一方面，弹窗可以作为一种即时反馈机制，向用户传递重要的信息或提示，如登录提示、网络请求状态、操作确认等。这些弹窗通常具有模态或半模态特性，能够暂时阻断用户的其他操作，确保用户能够注意到并处理这些信息。另一方面，弹窗还可以用于展示广告、推广内容或引导用户进行下一步操作。例如，在App首页或某些关键页面，通过弹窗展示全屏广告或引导用户参与某项活动，可以有效地提升用户参与度。为了方便开发者在HarmonyOS上高效使用不同的弹窗能力，Di
js实现网页自动跳转
09-29
js实现网页自动跳转倒计时！html新手必备！html新手必备！html新手必备！html新手必备！
页面自动跳转
chituidun1651的博客
06-24 171
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"&gt...
电脑上所有浏览器打开时自动跳转到同一个打不开的网页（浏览器被劫持）的解决办法
weixin_55519489的博客
02-27 1118
弹出internet选项设置窗口，常规一栏里第一项就是主页的设置，将网址改成你需要浏览的网址。3.按Windows键+R打开“运行”命令框。键入inetcpl.cpl，然后按确定。4.按Windows键+R打开“运行”命令框。键入regedit.exe，然后按确定。比如多出一个奇怪网址，这种情况下，需要现将多出来的网址进行删除，然后保存。2.打开浏览器的设置页面，选择“起始页面”，将网址改成你需要浏览的网址。1.查看浏览器快捷方式的属性是否有异常。更改为你想要的主页就行。打开Main把里面的。
html页面自动跳转
weixin_33909059的博客
06-26 479
网页的跳转在很多时候都非常的有用，下面的是两个简单的例子。仅供参考。 方案一，用<meta>里直接写刷新语句： <html> <head> <meta http-equiv="Content-Language" content="zh-CN"> <meta HTTP-EQUIV="Content-Type" CON...
网页自动跳转
jfukg的博客
08-13 208
把这段代码复制进你的html文件里面的标签内就可以了： <script language="javascript" type="text/javascript"> window.setTimeout("window.location='你的指定页面地址'",1000); </script >
页面自动跳转php,网站页面自动跳转实现方法PHP、JSP等
weixin_35511255的博客
03-23 1390
网站页面自动跳转实现方法PHP、JSP等自动转向，也叫自动重定向。自动跳转，指当访问用户登陆到某网站时，自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页，也可以是其它网站。通常情况下，浏览器会收到一个网页，该页面含有自动加载一其它网页的代码。该页面有可能在服务器端被转换，这样的话，浏览器只收到一个页面，而自动转向往往意味着浏览器收到的页面具有自动将访问用户送至其它页面的功...
HTML网页跳转微信添加好友/点击自动复制微信号一键跳转到微信
10-24
跳转单页是指只有一个页面的网站，其内容集中于一个目标，如引导用户进行某种操作（如添加微信好友）。引流单页则是为了吸引用户流量，通过简洁明了的信息和强烈的行动召唤，促使用户采取行动。 总的来说，"HTML...
微信下载APP跳转到浏览器页面，遮罩层提示，浏览器下载APP逻辑
02-20
这一过程涉及到了“微信下载APP跳转到浏览器页面”的逻辑，以及相关的用户体验设计，如遮罩层提示。下面将详细讲解这一逻辑及其背后的原因和实现方法。 首先，微信的这一策略是为了保护用户安全，防止恶意软件通过...
Thinkphp5结合layer弹窗定制操作结果页面
10-19
综合来看，Thinkphp5结合layer弹窗定制操作结果页面的做法能有效提高用户体验，避免了操作后页面自动刷新或者跳转带来的突兀感。通过灵活使用layer插件，开发者可以根据需要定制各种不同风格和功能的弹窗，更好地...
一个web404自动跳转页面
12-15
一个简单的web404页面，js简单的设置时间完成跳转
HTML实现页面自动跳转
Gardenia
02-29 397
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function(){ var time ...
页面自动跳转实现方法
热门推荐
浩瀚星空，法力无边；其大无外，其小无内。
10-17 4万+
自动转向，也叫自动重定向。自动跳转，指当访问用户登陆到某网站时，自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页，也可以是其它网站。通常情况下，浏览器会收到一个网页，该页面含有自动加载一其它网页的代码。该页面有可能在服务器端被转换，这样的话，浏览器只收到一个页面，而自动转向往往意味着浏览器收到的页面具有自动将访问用户送至其它页面的功能。对自动转向技术的合理应用包括：将用户
dw软件如何做导航页面跳转
最新发布
03-09
<think>好的，我现在需要帮助用户了解如何在Dreamweaver中实现导航页面跳转。首先，我需要回忆用户提供的引用内容，看看有没有相关的信息可以引用。引用[1]提到了Dreamweaver制作跳转菜单的方法，引用[2]则提到了DW实现网页区域跳转和Spry菜单栏，这可能涉及到导航跳转的方法。 用户的问题具体是“如何在DW中实现导航页面跳转”，所以需要分步骤说明。首先，我应该考虑常见的导航跳转方法，比如使用超链接、Spry菜单栏、跳转菜单或者JavaScript。每个方法的具体步骤是什么？ 根据引用[1]，跳转菜单可以通过插入表单对象中的跳转菜单来实现，用户选择选项后自动跳转。而引用[2]提到的Spry菜单栏可能更适用于导航条的制作，比如水平或垂直菜单，带有下拉选项，每个选项链接到不同页面。此外，基本的超链接也是必须提到的，因为这是最直接的方法。 接下来，我需要组织这些方法，确保步骤清晰。比如，方法一可以是使用超链接，方法二使用Spry菜单栏，方法三使用跳转菜单，方法四用JavaScript增强。每个方法需要详细步骤，例如在Dreamweaver中如何插入这些元素，如何设置属性，以及注意事项，比如测试时需要本地服务器或在线环境。 还需要注意用户可能遇到的常见问题，比如相对路径和绝对路径的区别，测试时是否需要服务器环境，以及如何自定义样式。此外，引用[2]提到了注册页面和JS登陆界面，可能相关的部分是如何在导航中加入登录/注册链接，但用户的问题主要是跳转，所以可能不需要深入这部分，但可以简要提及。 最后，生成相关问题，引导用户进一步学习，比如如何美化导航栏、处理动态跳转、或使用框架等。要确保引用正确，比如引用[1]和[2]在适当的位置标注，比如在跳转菜单和Spry菜单部分分别引用。 现在需要检查步骤是否正确，是否覆盖了用户的需求，是否有遗漏的方法，以及是否符合Dreamweaver的版本（用户提到的是DW8和引用中的版本可能不同，但基本功能类似）。可能需要提醒用户不同版本间的差异，但如果没有具体信息，可以保持一般性说明。</think>### Dreamweaver实现导航页面跳转方法教程 在Dreamweaver中实现导航页面跳转，可通过以下四种方法实现： --- #### **方法1：基础超链接跳转** 1. **插入超链接** 选中文本或图片 → 右键选择“创建链接” → 在属性面板的“链接”字段输入目标页面路径（如`about.html`）或完整URL。 ```html <a href="contact.html">联系我们</a> ``` 2. **设置打开方式** 在属性面板的“目标”选项中选择`_blank`（新窗口）或`_self`（当前窗口）。 **注意**：确保文件路径正确，本地测试时推荐使用相对路径[^2]。 --- #### **方法2：使用Spry菜单栏（动态导航）** 1. **插入Spry菜单** 点击“插入”菜单 → 选择“Spry” → “Spry菜单栏” → 选择水平/垂直布局。 2. **配置菜单项** 在属性面板中添加/删除菜单项 → 为每个项设置“链接”路径（如`news.html`）→ 可添加子菜单实现多级导航[^2]。 3. **自定义样式** 通过附带的CSS文件（如`SpryMenuBarHorizontal.css`）修改颜色、字体等样式。 --- #### **方法3：跳转菜单（表单式导航）** 1. **创建跳转菜单** 点击“插入” → “表单” → “跳转菜单” → 在弹出的对话框中添加菜单项，并填写对应URL。 2. **绑定JavaScript行为** Dreamweaver会自动生成跳转代码，例如： ```html <select onchange="location=this.value;"> <option value="index.html">首页</option> <option value="product.html">产品</option> </select> ``` **适用场景**：适用于下拉式导航，用户选择后自动跳转[^1]。 --- #### **方法4：JavaScript增强跳转** 通过自定义脚本实现复杂逻辑，例如根据条件跳转： ```html <script> function redirectToPage(url) { if (confirm("确认跳转？")) { window.location.href = url; } } </script> <button onclick="redirectToPage('login.html')">登录</button> ``` --- #### **注意事项** 1. **路径问题**：本地测试时推荐使用相对路径（如`../pages/about.html`），部署后检查绝对路径。 2. **浏览器限制**：部分JavaScript跳转可能被浏览器拦截，需提示用户允许弹窗。 3. **响应式设计**：使用CSS媒体查询适配移动端导航栏折叠效果。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九陌斋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值