Question

我正在尝试使用由网址查询字符串触发的javascript添加弹出窗口。我希望弹出窗口保持隐藏状态，除非查询字符串附加到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秒钟后弹出。此刻，无论网址如何，弹出窗口都会自动显示。

任何帮助将不胜感激。

Answer 1

此刻显示的弹出窗口仅仅是因为您尚未调用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>

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

1 个答案: