1

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.

  • What do you mean by "show"? Your current code adds 2 click listeners, it shouldn't show anything by default – kero Dec 5 '19 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.com.br – Wanderson Galpão Dec 5 '19 at 13:57
  • How the popup is working? Is it a plugin? – mysticalghoul Dec 5 '19 at 14:43
  • I got the script from this link: quora.com/… – Wanderson Galpão Dec 5 '19 at 14:56
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.com.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.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();
            });
        }
    });
|improve this answer|||||
  • Many thanks for your help. It was a great idea to get the url. I would never thought of that. I followed your instructions, but i am getting a weird page when i set the css to display: none and in the other pages fo the site, i cant close the popup. I am going to edit the question to show the css. – Wanderson Galpão Dec 6 '19 at 11:46
  • Hm, looks like in the #thover selector you are missing a semicolon after opacity: .6 try #thover{ position:fixed; background:#000; width:100%; height:100%; opacity: .6; display:none; } – Anthony D Dec 6 '19 at 14:35
  • Man, youre right! Didnt see it. Thanks a lot for your help. Saved my ass :D. How can i get better at Javascript? I know it is annoying to ask for help so very often. – Wanderson Galpão Dec 6 '19 at 17:15
  • The more you work with a language, the more it sticks with you. Finding projects to work on to get your "practice" can be challenging when you're starting out. So I would recommend trying an online course that includes projects. Not only does it teach you the basics of the language, but it will show you how to put what you've learned to use. I personally recommend this one udemy.com/course/the-complete-javascript-course. Good luck! If you could mark my answer as "Accepted" that would be greatly appreciated. Thanks! – Anthony D Dec 6 '19 at 17:54
  • Thanks again! I will do what you suggested. Best regards! – Wanderson Galpão Dec 9 '19 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.