HTML CSS Javascript JQuery Webpage Popup Dialog Tutorial

HTML CSS Javascript JQuery Webpage Popup Dialog Tutorial


Welcome to this web developer how to. You’re probably familiar with seeing
popup dialog boxes when visiting websites. Sometimes they can
be darn annoying and other times they can make using a
website just plain easier. You can use them to
get the attention of a visitor for marketing actions like subscribing
to your site, or buying your product or service. And
they could be useful for showing a form without the need of having it part of the
web page’s layout. Popup dialog boxes can be created using
HTML, CSS, JavaScript, and jQuery. So let’s get
started. Our first step is to add JQuery and the button for opening the popup. We’re going to build all the relevant
parts from scratch starting with a simple shell web page. The HTML file consists
serve several paragraphs contained in the page-content div element. And that element is then contained within the
page-wrapper div element. We’re using the Meyers CSS reset. And there is some routine styling in the
base CSS file. The first snippet has the HTML for a
standard button. Copy that. And place it at line thirteen
in the practice HTML file. So we can select the button in CSS and
jQuery, we are giving it the id modal-open-button. Then snippet number two has a link to the
jQuery code and a link to the JavaScript file for
the code that we will write. And put that on line 22 just before the
close body tag. Then we have the handler code for when
jQuery is ready in snippet three. Put that in the popup JS file as our
first lines of code. And finally snippet number four. This is
the click event handler for the popup open button. That goes on line three at the end
of the jQuery ready handler. Then test in your web browser. Check your network
resources window to see that jQuery and the popup JS file were loaded. Examine the console window to see the
test log messages we planted in our code. We have one for the jQuery ready method.
Click the button. And we have the message confirming that
it’s click handler is working. Now we will put together the popup’s HTML and CSS. We’re
going with a simple informational popup that the user will close. The first snippet contains the HTML for the popup
content section. We will put that after the web page
elements just before the script tags. That should be line 22. We have some CSS
for the popup. We will link that using a separate
stylesheet file. Copy snippet number two. Drop that
after the other external CSS files on line 9 of the HTML file. Now the CSS for the popup body is in
snippet three. This is mostly styling for the box model
properties. Paste that is our first lines for the
popup’s CSS file. Refresh the page and you should see the
popup in the bottom left corner. The properties we set for the popup-content
selector are shown in the element inspector’s style panel. In case
you do not see them, check the network panel to be sure the
popup CSS file loaded. Now let’s add a title for the popup. We
have that as the fourth snippet. Add that in the HTML
file on line 25. Then the CSS for the heading is the fifth
snippet. Just basic font styling and some padding.
Add it at the bottom of the popup CSS file. Make a quick check in a web browser
using the element inspector. And you can see we have the heading with
our CSS styles applied. Now we will add a close button. The HTML
for that is in snippet six. This is just a standard button with an
id for selecting it. Drop that in on line 29 just before the end
of the popup div. We’re wrapping the button in its own
div element for layout positioning. And snippet seven has that layout CSS. Paste
it at the bottom of the popup CSS file. The goal here is to align the button on the
bottom right within its div element container. So we needed to select that div element.
We’re doing that by finding the first descendant div element for the popup
container. Then the plus sign gets us to its
adjacent sibling div. There are of course other approaches. You
could use the CSS last-child pseudo-class. But check the comment about that for
legacy IE web browsers. You could also assign the inner div elements
ids or classes. Now for a check in the web browser with
the element inspector. You see our selector was applied as expected. That completes the popup layout styling. Now we can get to work on
the Javascript, starting with opening and closing the popup. behind the popup before the page is
We will hide the popup before the page is
rendered. Copy snippet one. Add it to the popup content selector in
the CSS file as line eight. Reload the page. Now the popup id
hidden. And you can see that in the element
inspector. Now for the JavaScript coding. We will use functions to better organize our
code. The first function is for opening the popup. Snippet 2 has the function completed. Add it
at the end of the popup JS file. The openPopup function uses the
jQuery prop method to disable our open button. Then the jQuery fadeIn method is used
to reveal the popup. Then we’ll call that function in the popup open
button handler. Copy snippet three. And add to the end
and the modal open button handler. Time to test in the
web browser. Click the show button and the popup will appear. You can see
the style attribute was added by jQuery overriding the display property in the popup CSS file. Refresh the page
if you need to test that again. Now to get the close button working.
Again we will use a function. It is our fourth code snippet. Add at the
bottom of the popup JS file. This closePopup function reverses the
steps we have in the openPopup function. We enable the popup open button and
hide the popup with the jQuery fadeOut method. We will use the function in a click handler
for the close button which is our last snippet. Paste it at the end at the jQuery ready
handler on line 7. Check all this code out in a web browser.
The popup opens and closes. If you’re having any
problems, check the console window for any errors
and also the console log messages. Now we are ready to control the position of the popup. So let’s explore some options. The popup is currently positioned as part of the
HTML page flow layout. So we will remove it from that using the
CSS that’s in snippet number one. Replace line 11 in the popup CSS file. The fixed position removes the popup from its
default place in the page layout’s flow. Plus it activates the left and top
properties. And the z-index property stacks it above all the web page
elements. We will use a function to set where the
popup appears. Snippet 2 has the function. Its code
centers the popup vertically and horizontally. It uses these centering formulas. They compute
the top and left positions respectively. For the outer container we could use the
document object. This is dependent on the elements that
make up the web page. Instead we are using the window object.
It relates to the viewing area regardless of what is in the page. To get the window height we use the jQuery
height method. And the jQuery width method for the width. The inner container is our popup
div element. Instead of the height method we are
using the outerHeight JQuery method. It includes both top and bottom padding and
border thickness. And the jQuery outerWidth method does
the same for getting the width. Paste the function at the end at the
popup JS file. You can see we use a variable for the popup div element. And also for the top and left formula
results. Then we are setting the popup using the
jQuery CSS method. In this case we are using the option
for passing a JavaScript object as the argument. Then go back and get
snippet number three. This is the call to the updatePopup
function. Add that at the end the openPopup function. Now try this out
in the web browser. Resize the web browser between opening
popups. You will see the centering work. You might try some responsive layout
viewers. Generally centering the width is appealing. But centering the
height may not be the best approach. So let’s stick the popup near the top
instead of vertically centering it. We will replace the vertical centering
formula by just setting the top property to a hard coded value. Copy snippet four. Replace line 25 in the
popup JS file. Try it out again and you’ll see we have the
popup nudged near the top of the screen. Now you may find that you want the popup to
reposition depending on scrolling or device orientation. In our case the
width is computed, so there we will see some interesting
problems. Look at the results going from landscape to portrait in a tablet. Or going from portrait to landscape in a
smartphone view. Again in a tablet viewport. Same with desktop browser resizing. We can fix this easily by responding to
the window resize event and recomputing the popup
position. Our last snippet but has the code. We’ll
stick that in the jQuery ready handler as the last item on line 11. Very simply when jQuery
detects a window resizing event, our updatePopup method is executed. Try
it out again and now the popup stays centered
horizontally as the view widths change. And the same using a responsive
view simulator for orientation changes. A common feature that you see with popups
is a page content overlay. The overlay may or may not obscure the
page content. And it may allow user action to close the
popup. So let’s add one. First you need an element to cover the webpage.
Snippet one has that as a div element. Put that in after the popup elements on
line 33 of the HTML file. Then we need to style it. For that copy the second snippet. Add to
the bottom of the popup CSS file. First we are removing it from
the default position in the page layout. Then the height and width are set to 100 percent
on the parent element. In our case this is the HTML body element. So it will cover the page. Then we are
making it partially translucent using the opacity property. There are some workarounds for IE7 and
IE8 noted in the code comments. Then finally the z-index property is
set below the popup element’s z-index value. That makes the overlay appear between
the page elements and the popup. So let’s see what we have in the web
browser. The overlay covers the page regardless of resizing. It also absorbs any user action so at
this point we cannot click the popup open button. Our next step is to hide the overlay when
the page is first rendered. Easily done with the display property
in snippet 3. Insert that into the overlay’s CSS selector. We will put it on line 26. That will hide
the overlay. Now we just need to open and close it
with the popup. For opening we will use the jQuery fadeIn
method in snippet four. Insert that into the openPopup function
on line 18 of the popup JS file. Then to close it, snippet five uses the
jQuery fadeOut method. That goes into the closePopup function
on line 24. We can test this out in the web browser.
And the overlay opens and closes along with the popup. Now it would be great to use the overlay to
close the popup. To do that we can add a click handler for the overlay and call
the closePopup function. All done in the last snippet. We will put
that before the window resize handler on line 11. Test in a web browser. Now you can click
or touch the overlay and the popup closes. That is a good example of popup initiated by user interaction. But you
might like the popup to open automatically when the page loads. To do that we can
use to built-in JavaScript setTimeout function. It will call function one time after a
number of milliseconds expires. Here in the first snippet we’re going to
use it to call the openPopup function after two seconds. Paste that into the popup JS file on
line 3 as the first step in the jQuery ready handler.
Test and shortly after the page reloads, the
popup appears. Now your options to keep the open popup
button will depend on your design needs. For example you can remove it altogether.
What we will do is keep it, but hide it on the initial page load. That
is our second snippet. And we can put that in the popup CSS
file. And we will stuff it in before the overlay
selector on line 23. Then we will show the open button after
the popup was dismissed for the first time. Copy the last snippet. Put that into the
closePopup function on line 28. There is no need to test for the button’s
visible state. If the button is already visible, the
jQuery fadeIn method makes no changes. Now when we test, the open button is
hidden until the popup is dismissed. Now you have a basic example for creating popups based on HTML, CSS, JavaScript and jQuery. Let’s review some
of the key items that we used. To open and close the popup and overlay,
we used the jQuery animation methods fadeOut and fadeIn. The JQuery prop method was used for
setting the button disabled states. For positioning the popup, the JQuery
CSS method was used to set the left and top properties. The width, height, outerWidth and outerHeight
JQuery methods were used to compute the center positioning. The event handlers we used were ready, click
and resize. The resize handler for the window is critical in keeping the popup
positioned when the page resizes or when device orientation changes occur.
Finally we used the built-in JavaScript setTimeout method to automatically show
the popup when the page loaded. For the HTML we placed the popup and
overlay at the end of the page content. Then we used CSS to remove them from the
page layout’s flow. That allowed us to use the top, left and
z-index property to position them using JavaScript and jQuery. And we used the opacity and filter
properties so we could see the page elements through the overlay. Now you can build upon our basic
informational popup. For ideas look at the starter examples
that are included in your download files. There is a form popup example for
a site login and another for basic email registration. Then there is a marketing form popup
you could use for teaser giveaways about your services and products. And
there’s one for media popups using thumbnail images. If you have
questions or need help building your popup be sure to post in the discussion
area for this video.

Daniel Ostrander

Related Posts

9 thoughts on “HTML CSS Javascript JQuery Webpage Popup Dialog Tutorial

  1. vishal vazkar says:

    Very neat and nice example. Thanks a lot

  2. Koen Joos says:

    Great tutorial

  3. Ardy Aryan says:

    beautifully done, thanks a lot

  4. Sunny Singh says:

    i want custom pop up which will subscribe youtube then only anyone can enter the website i want that, can u suggest me how to do that

  5. Dwinar7 says:

    How to make popup appear only once for each client? Do you check client's cookies or something along those lines?

  6. Sunny Sung says:

    Awesome tutorial Mr Lon Hosfor.

  7. afghan boy says:

    thank you Mr Lon Hosford . this was the coolest and greatest tutorial i ever seen in these types of Tutorial Series.
    AWESOME !!!

  8. Nazrul Islam says:

    Thanks a lot Brother

  9. JNIT Works says:

    Thank you so much. That what I'm looking..

Leave a Reply

Your email address will not be published. Required fields are marked *