i have this jquery popup but i need to show it only in the homepage. Here is the code:

$(document).ready(function(){

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


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

});

This is the CSS:

<style>

thover{

position:fixed; background:#000; width:100%; height:100%; opacity: .6 display:none; }

tpopup{

position:absolute; width:600px; height:836px; background:#eeeeee; left:50%; top:50%; border-radius:5px; padding:10px 0; margin-left:-300px; /* width/2 + padding-left / margin-top:-418px; / height/2 + padding-top */ text-align:center; box-shadow:0 0 10px 0 #000; z-index: 9999; display:none; }

tclose{

position:absolute; background:black; color:white; right:-15px; top:-15px; border-radius:50%; width:30px; height:30px; line-height:30px; text-align:center; font-size:8px; font-weight:bold; font-family:'Arial Black', Arial, sans-serif; cursor:pointer; box-shadow:0 0 10px 0 #000; }

Thanks in advance.

i have this jquery popup but i need to show it only in the homepage. Here is the code:

$(document).ready(function(){

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


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

});

This is the CSS:

<style>

thover{

position:fixed; background:#000; width:100%; height:100%; opacity: .6 display:none; }

tpopup{

position:absolute; width:600px; height:836px; background:#eeeeee; left:50%; top:50%; border-radius:5px; padding:10px 0; margin-left:-300px; /* width/2 + padding-left / margin-top:-418px; / height/2 + padding-top */ text-align:center; box-shadow:0 0 10px 0 #000; z-index: 9999; display:none; }

tclose{

position:absolute; background:black; color:white; right:-15px; top:-15px; border-radius:50%; width:30px; height:30px; line-height:30px; text-align:center; font-size:8px; font-weight:bold; font-family:'Arial Black', Arial, sans-serif; cursor:pointer; box-shadow:0 0 10px 0 #000; }

Thanks in advance.

• jquery
• javascript

• What do you mean by "show"? Your current code adds 2 click listeners, it shouldn't show anything by default – kero Commented Dec 5, 2019 at 13:47
• I am very bad at javascript, sorry! Still have much to learn. Here is the link to the website homepage: www33.ecoar.br – Wanderson Galpão Commented Dec 5, 2019 at 13:57
• How the popup is working? Is it a plugin? – mysticalghoul Commented Dec 5, 2019 at 14:43
• I got the script from this link: quora/… – Wanderson Galpão Commented Dec 5, 2019 at 14:56

1 Answer 1

The first thing you need to do is add display:none; to your CSS for both #thover & #tpopup so they are hidden by default.

Next you will want to use JS to find the URL of the page you are on and store this in a variable you can test against to determine if the pop-up should show.

Add the following to the jQuery function:

const pageURL = window.location.href;

Wrap everything else you already have in a conditional that checks if the page is Home:

if (pageURL === 'http://www33.ecoar.br/'){
...
}

Inside the conditional, add the following line of jQuery to show the pop-up when true:

jQuery("#tpopup, #thover").show();

The new completed JS for 'popup.js' will be:

   jQuery(document).ready(function () {
    const pageURL = window.location.href;
        if (pageURL === 'http://www33.ecoar.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();
            });
        }
    });