时间戳

首页 > 解决方案 > 如何实现依赖于查询字符串的弹出窗口？

javascript - 如何实现依赖于查询字符串的弹出窗口？

问题描述

我正在尝试使用 javascript 添加一个由 URL 的查询字符串触发的弹出窗口。我希望弹出窗口保持隐藏，除非查询字符串附加到 URL。我将主要将弹出窗口用于重定向和我想要显示的与重定向相关的任何消息。

我已经尝试使用我以前使用过的不同功能的组合并且无法使其工作，所以我只是想知道是否有人可以看一下并告诉我哪里出错了。

带有查询字符串的重定向将是这样的： https ://www.example.com/?fromoldsite

脚本

<script>
    var fromOldURL = window.location.href;

    if (fromOldURL.indexOf('fromoldsite') !== -1) {
        function PopUp(hideOrshow) {
        if (hideOrshow == 'hide') document.getElementById('redirectPopUp').style.display = "none";
        else  document.getElementById('redirectPopUp').removeAttribute('style');
        window.onload = function () {
            setTimeout(function () {
                PopUp('show');
                }, 3000);
            } 
        }
    }
</script>

CSS

<style>
    #redirectPopUp {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.6);
        z-index: 1001; }

    #popUpContent{
        padding: 100px;
        width: 50%;
        height: 50%;
        background-color: #FFF;
        background-size: cover
        position: relative;
        margin: 200px auto; }
</style>

HTML

<div id="redirectPopUp">
    <div id="popUpContent">
        <h2>Popup Content Here</h2>
        <h6>Popup Message Here</h6>
        <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
    </div>
</div>

我希望仅当 url 包含“fromoldsite”并在 3 秒后弹出时才显示弹出窗口。目前，无论 URL 是什么，弹出窗口都会自动显示。

任何帮助，将不胜感激。

标签： javascripthtmlcss

解决方案

目前，您的弹出窗口正在显示只是因为您还没有打电话PopUp("hide");。

此外， PopUp的函数定义位于评估查询字符串的 if 块内。将其移到 if 块之外。

最后，如果查询字符串存在，则应该只触发setTimout函数。

您更正的代码应如下所示：

<script>
function PopUp(hideOrshow) {
  if (hideOrshow == 'hide')
    document.getElementById('redirectPopUp').style.display = "none";
  else
    document.getElementById('redirectPopUp').removeAttribute('style');
}

var fromOldURL = window.location.href;

if (fromOldURL.indexOf('fromoldsite') !== -1) {
  setTimeout(function() {
    PopUp('show');
  }, 3000);
}

PopUp("hide");
</script>

推荐阅读