如何在一个页面或一次显示jQuery弹出窗口？

时间：2019-12-05 作者：Wanderson Galpão

我有这个jquery弹出窗口，但我只需要在主页中显示它。代码如下：

$(document).ready(function(){

  $("#thover").click(function(){
        $(this).fadeOut();
    $("#tpopup").fadeOut();
    });


  $("#tclose").click(function(){
        $("#thover").fadeOut();
    $("#tpopup").fadeOut();
    });

});
这是CSS：

<style>
位置：固定；背景：#000；宽度：100%；高度：100%；不透明度：6显示：无；}

tpopup{/h1>位置：绝对；宽度：600px；高度：836px；背景：#eeeeee；左侧：50%；顶部：50%；边框半径：5px；填充：10px 0；边距左侧：-300px；/*宽度/2+填充左侧/边距顶部：-418px；/高度/2+填充顶部*/文本对齐：中心；方框阴影：0 0 10 px 0#000；z索引：9999；显示：无；}

tclose{/h1>位置：绝对；背景：黑色；颜色：白色；右侧：-15px；顶部：-15px；边框半径：50%；宽度：30px；高度：30px；线宽：30px；文本对齐：中心；字体大小：8px；字体重量：粗体；字体系列：“Arial black”，Arial，无衬线；光标：指针；方框阴影：0 0 10px 0#000；}

提前谢谢。

1 个回复
最合适的回答,由SO网友:Anthony D 整理而成

您需要做的第一件事是添加display:none; 到您的CSS#thover &；#tpopup 因此，默认情况下它们是隐藏的。

接下来，您需要使用JS找到您所在页面的URL，并将其存储在一个变量中，您可以根据该变量进行测试，以确定弹出窗口是否应该显示。

将以下内容添加到jQuery函数中：

const pageURL = window.location.href;
将您已有的所有其他内容包装在一个条件中，以检查页面是否为主页：

if (pageURL === \'http://www33.ecoar.com.br/\'){
...
}
在条件中，添加jQuery的以下行以在true时显示弹出窗口：

jQuery("#tpopup, #thover").show();
新完成的JS for\'弹出窗口。js’将是：

   jQuery(document).ready(function () {
    const pageURL = window.location.href;
        if (pageURL === \'http://www33.ecoar.com.br/\') {
            jQuery("#tpopup, #thover").show();
            jQuery("#thover").click(function () {
                jQuery(this).fadeOut();
                jQuery("#tpopup").fadeOut();
            });
            jQuery("#tclose").click(function () {
                jQuery("#thover").fadeOut();
                jQuery("#tpopup").fadeOut();
            });
        }
    });

标签： jquery   javascript   小码农  

相关推荐

无法推迟加载jQuery

我有两个来自wordpress core的渲染块JS。jquery。js和jquery迁移。最小js。下列的this answer on WPSE 我能够向调用jquery migrate和bootstrap的脚本标记中添加“defer=”defer“，但对“jquery”执行相同操作不会将defer属性添加到调用jquery的脚本标记中。js公司 add_filter( \'script_loader_tag\', function ( $tag, $handle ) { $handl