4

I want an image to automatically popup when someone goes to our main page. One that they can click to close after they have seen it. Can someone please show me how to do this that doesn't require a ton of coding. Thanks you!

Boann
  • 48,794
  • 16
  • 117
  • 146
user3376481
  • 67
  • 1
  • 2
  • 9

1 Answers1

6

I would do this with jQuery (and I bet you're using jQuery for your template too :) )

Be sure you're calling the jQuery library in your page, I would recommend to place it just before the </body> tag and BELOW all the scripts.

for example

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- let's call the following div as the POPUP FRAME -->
<div id="popup">

    <!-- and here comes the image -->
    <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">

        <!-- Now this is the button which closes the popup-->
        <button id="close">Close button</button>

        <!-- and finally we close the POPUP FRAME-->
        <!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
//your jquery script here
</script>

</body>
</html>

This will show up a piece of code, if you want to simply show an image, put the id="popup" directly on your <img> tag.

Now, let's move to the example... the code is pretty easy to understand:

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {

    //select the POPUP FRAME and show it
    $("#popup").hide().fadeIn(1000);

    //close the POPUP if the button with id="close" is clicked
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });

});

The script behaves like this: When the page is loaded, the content inside <div id="popup"> show up, and if the button with id="close" is clicked, then the pop up is hidden. Add whatever you want inside this <div id="popup"> and it will show inside the popup.

The CSS: SUPER IMPORTANT!

/*we need to style the popup with CSS so it is placed as a common popup does*/
    #popup {
            display:none;
            position:absolute;
            margin:0 auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
    }

You can see it working along with the HTML on this live example:

http://jsfiddle.net/Lp9edyg5/1/

Frondor
  • 3,466
  • 33
  • 45
  • I think I am doing something wrong. Could you please who me an example of what the code would look like with an image? I guess I am not understanding what you mean when you said "When the page is loaded, the content inside – user3376481 Oct 01 '14 at 17:55
  • @user3376481 I explained it to look really really easy! Please, take a look again, I already gave you a working example but I re-edit it anyway! check it here **http://jsfiddle.net/Lp9edyg5/1/** I added A LOT of comments to the code, HTML/JS/CSS so you can understand and implement it. Got it? :D – Frondor Oct 02 '14 at 00:36
  • Thanks for you time but I guess I am too much of a noob to get it. I think that I have done everything you said but it is not working. I have inserted the html in the proper place with reference to the image. I have inserted the css within the main.css file and put the javascript inline within the html. Here is a test page where I am trying to pull the image. You can see it come up at the bottom left. Thanks for your time. http://deerwoodfamilyeyecare.com/test – user3376481 Oct 02 '14 at 16:01
  • **1)** First of all, you want to properly close the `` tag it's missing the `/` so script is not running :) **2)** You have already called jQuery on line 161 so you can delete the jQuery api from googleapis.com I've provided (although it isn't necessary for our popup to work). **3)** Without CSS the modal won't properly show up, so add the piece of CSS i've posted above. **4)** Your site is FULL of errors, you should use your browser console (google it if you dont know what it is) and debug every error :) – Frondor Oct 02 '14 at 22:46
  • Perfect! I got it to close. But is there anyway to have it overlay over the content and right in the center? – user3376481 Oct 03 '14 at 14:53
  • For third time, ADD THE CSS! There is a huge **The CSS: SUPER IMPORTANT!** title on my post, if you don't add it to your page, than the popup won't overlay the content. You know how to implement that CSS code I gave, right? – Frondor Oct 03 '14 at 15:40
  • I added it to my main.css page. Do you mean add in inline? I thought when you added the #pop along with the code to the .css page that the div id pulled it. Please forgive my noobness. – user3376481 Oct 06 '14 at 16:44
  • It's ok, that's why you're here I think. Here: http://deerwoodfamilyeyecare.com/test you don't have any "main.css" file, it's the same if you add it inline or not... But as I can see, even if you added the CSS into "main.css" file, said file is missing on http://deerwoodfamilyeyecare.com/test - add the CSS inline inside ` – Frondor Oct 06 '14 at 18:57
  • It's awesome to have such a great community that helps out. Thank you. Hopefully I won't always be a noob and can pay it forward. ;) – user3376481 Oct 07 '14 at 02:51
  • Well, yes. It worked on the test page but when I tried to do it on the main page, I can't figure out to get it to come to the front. There is some kind of java script slider that is in front of the image. I don't know what to do to get the image to come in front of it and it to run behind the image. Thoughts? Thanks. – user3376481 Oct 08 '14 at 02:20
  • I see it working now here http://deerwoodfamilyeyecare.com/test ! So.. Is it now working for you? If so, don't forget to say "thanks" by marking the question as the best one :) – Frondor Oct 15 '14 at 17:58
  • did you read my last comment? I can get it to work on the test page but when trying to use it on my main page I can't get it to go over top of the java script slider that is on that page. What do I need to do to get it to be the top layer, if you will? – user3376481 Oct 16 '14 at 16:49
  • Tried using `z-index` property in CSS for that? Take a look to the CSS code on my main post, I've edited it and added the line `z-index: 9999;`. That should pull the popup image to the very front, and leave the slider in the very back. I'm uploading a video for you, so you can see how I proceed: **http://youtu.be/osGM-4AFZyM?hd=1** – Frondor Oct 17 '14 at 00:06
  • 1
    sorry for resurrecting a dead post, but is there any way to make this pop up appear after somebody clicks on a hyperlink on the page instead of automatically once the page has loaded? – Blaine Apr 09 '15 at 10:16
  • 1
    D/w I'm always willing to help. For that you must bind the `.on(click) ` event, but first put an *id* attribute to your anchor tag. Then write `$("#lingID").on("click", function (e) {e.preventDefault(); /*and-place-the-lines-for-selecting-the-popup-and-closing-it-here*/ )};` of corse, the whole code goes inside `$(document).ready()` and it *WRAPS* the other two `$("#popup")....` and `$("#close")....` lines. @Blaine – Frondor Apr 09 '15 at 17:51
  • holy cow... That looks complicated. I'm a bit of a noob at Javascript. Could you explain where exactly I need to put all that code? – Blaine Apr 11 '15 at 05:03
  • 1
    @Blaine compare both javascript codes, the one from the example and the new one I've commented here: http://jsfiddle.net/1bmoz5we/ it's really easy. You should learn jQuery before, so it turns easier for you – Frondor Apr 11 '15 at 05:14