A Simple Popup Tutorial

Creating a popup is a very simple addition to any webpage. In this tutorial I will show you how to create a popup using basic html, javascript and css. The first thing we want to think about is what we want to do in order to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial we will be clicking on a button to trigger a popup.

What you will need :

  • Text Editor such as notepad++ or Sublime Text Editor – Choose a text editor you prefer to write code in
  • Basic knowledge of HTML, JavaScript, CSS

Let’s start building the popup

1
2
3
4
5
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols"></div>
    <div class="popupcontent"></div>
</div>

We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content  and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently this popup has no content and no styling so nothing will show. Lets add some styling next.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<head>
    <title>A Simple Popup</title>
    <style>
        #overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            background: #999;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            z-index: 100;
        }
        #popup {
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            width: 500px;
            height: 500px;
            margin-left: -250px; /*Half the value of width to center div*/
            margin-top: -250px; /*Half the value of height to center div*/
            z-index: 200;
        }
    </style>
</head>
<body>
<div id="maincontent">Page Content</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols"></div>
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>

We’ve now added some css for the overlay and the popup. At this point we can see a white box above our grey overlay. We’ve added a h1 tag inside our popup a page title and some main page content. We should now see something like this:

popup-example-01

Next lets add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <title>A Simple Popup</title>
    <style>
        #overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            background: #999;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            z-index: 100;
        }
        #popup {
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            width: 500px;
            height: 500px;
            margin-left: -250px; /*Half the value of width to center div*/
            margin-top: -250px; /*Half the value of height to center div*/
            z-index: 200;
        }
        #popupclose {
            float: right;
            padding: 10px;
            cursor: pointer;
        }
    </style>
    
</head>
<body>
<div id="maincontent">Page Content</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols">
        <span id="popupclose">X</span>
    </div>
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>
<script type="text/javascript">
        // Initialize Variables
    var closePopup = document.getElementById("popupclose");
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
        // Close Popup Event
    closePopup.onclick = function() {
        overlay.style.display = 'none';
        popup.style.display = 'none';
    };
</script>
</body>
</html>

Now we can close this popup…. Ah that’s nice. Here we’ve added our X to click on, some css to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Lets hide this with css on load so that we have to do something to open it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #999;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
}
#popup {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    width: 500px;
    height: 500px;
    margin-left: -250px; /*Half the value of width to center div*/
    margin-top: -250px; /*Half the value of height to center div*/
    z-index: 200;
}

After adding display: none; to our overlay and popup you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
    <title>A Simple Popup</title>
    <style>
        #overlay {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            background: #999;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            z-index: 100;
        }
        #popup {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            width: 500px;
            height: 500px;
            margin-left: -250px; /*Half the value of width to center div*/
            margin-top: -250px; /*Half the value of height to center div*/
            z-index: 200;
        }
        #popupclose {
            float: right;
            padding: 10px;
            cursor: pointer;
        }
        .popupcontent {
            padding: 10px;
        }
        #button {
            cursor: pointer;
        }
    </style>
    
</head>
<body>
<div id="maincontent">
    <h1>Page Content<h2>
    <button id="button">Show Popup</button>
</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols">
        <span id="popupclose">X</span>
    </div>
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>
<script type="text/javascript">
    // Initialize Variables
    var closePopup = document.getElementById("popupclose");
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    var button = document.getElementById("button");
    // Close Popup Event
    closePopup.onclick = function() {
        overlay.style.display = 'none';
        popup.style.display = 'none';
    };
    // Show Overlay and Popup
    button.onclick = function() {
        overlay.style.display = 'block';
        popup.style.display = 'block';
    }
</script>
</body>
</html>

We’ve added a button in our maincontent area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.

Demo:

See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.

Please post your questions or feedback in the comment area.

About 

Graduated from NAIT Digital Media and IT specializing in application development. PHP is my favorite language. I am a continuous learner always trying new languages, applications, frameworks. Passions are Programming, Photography and Travel.


Comments
  • this is really great tutorial for learning popup. this really simple to understand. thanks for the contents, 🙂

  • Clean and simple, I like it! Always nice to start out doing stuff like this WITHOUT using jquery.

  • hey joe, i really dont understand to work with ajax and javascript so please help me,how to learn it,and i also have task given by my boss,will please help me out,i have form already created but i need a pop box on the form and in that pop box i want to upload an image and then crop that image n display the image on parent page,and then its path to the parent form,so i can save the path of the image in the database with rest of the field, if my question not clear to u then pls reply me,so ill explain more precisly..