How do I make an image automatically popup on my main page when someone goes to it?

问题

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!

回答1:

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/

来源：https://stackoverflow.com/questions/26131542/how-do-i-make-an-image-automatically-popup-on-my-main-page-when-someone-goes-to

标签

html

popup

popupwindow