Advertisement

Create a Fading Popup Modal with jQuery

This tutorial is aimed at getting beginners familiar more advanced concepts like data attributes and, at times, there will be more “efficient” ways of doing things, like creating advanced functions and optimising the output. However, as this tutorial is aimed at helping beginners, I’ll be taking a more procedural approach than some people might take. There is not right or wrong way here, there are simply more advanced and less advanced methods of getting the desired outcome.

Table of Contents

  1. Skip to the HTML
  2. Skip to the CSS
  3. Skip to the jQuery

If you get stuck at all please leave me a comment below with a description of the problem and a link to a JSFiddle showing your code in action. I’m here to help, no matter what the problem.

You might also like: How to Create a 12 Column Grid System with Sass


1.) Step 1: HTML

Pro-Tip: Place it in the Footer

If you’re running a PHP powered site, like a WordPress blog, then it’s a good idea to put the code for the popup itself in the footer include file. This way you can always be sure the popup will be included on every page.

Final HTML

<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a>

<div class="popup" data-popup="popup-1">
	<div class="popup-inner">
		<h2>Wow! This is Awesome! (Popup #1)</h2>
		<p>Donec in volutpat nisi. In quam lectus, aliquet rhoncus cursus a, congue et arcu. Vestibulum tincidunt neque id nisi pulvinar aliquam. Nulla luctus luctus ipsum at ultricies. Nullam nec velit dui. Nullam sem eros, pulvinar sed pellentesque ac, feugiat et turpis. Donec gravida ipsum cursus massa malesuada tincidunt. Nullam finibus nunc mauris, quis semper neque ultrices in. Ut ac risus eget eros imperdiet posuere nec eu lectus.</p>
		<p><a data-popup-close="popup-1" href="#">Close</a></p>
		
		<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
	</div>
</div>

The HTML Explained

The structure of the popup is quite straightforward, so nothing to worry about there. We start off with a wrapper div and give it a class of popup. This is the black background around the popup but also what we’ll animating with jQuery.

You may notice those data attributes I’m using, for example data-popup="popup-1". The reason for using these is to make the code easier to use and maintain in the long run. Some people are advocates of using IDs in the same approach, however this can become confusing as IDs are also commonly used for styling.

<div class="popup" data-popup="popup-1">

</div>

The open button also uses a data attribute of data-popup-open="popup-1", which you may notice is the same value as the popup itself. This is handy because it will allow us to dynamically open the popup with jQuery.

<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a>

To close the popup there’s a normal anchor link and a specially positioned anchor link with data-popup-close="popup-1" applied to them. The good thing about using a data attribute on both links is that it allows us to have a special close button in the upper right of the popup, but also use a normal link inside of the popup to close it as well.

<p data-popup-close="popup-3"><a href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-3" href="#">x</a>

2.) Step 2: CSS

Final CSS

/* Outer */
.popup {
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0,0,0,0.75);
}

/* Inner */
.popup-inner {
	max-width:700px;
	width:90%;
	padding:40px;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	box-shadow:0px 2px 6px rgba(0,0,0,1);
	border-radius:3px;
	background:#fff;
}

/* Close Button */
.popup-close {
	width:30px;
	height:30px;
	padding-top:4px;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	transition:ease 0.25s all;
	-webkit-transform:translate(50%, -50%);
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgba(0,0,0,0.8);
	font-family:Arial, Sans-Serif;
	font-size:20px;
	text-align:center;
	line-height:100%;
	color:#fff;
}

.popup-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgba(0,0,0,1);
	text-decoration:none;
}

The CSS Explained

The popup wrapper is using RGBA color values to enable transparency, something a basic #HEX code can’t do. It also has fixed positioning, which makes it stay centered if the page is scrolled.

/* Outer */
.popup {
	background:rgba(0,0,0,0.75);
}

The inner content area of the popup is absolutely positioned but also repositioned with transform. The absolute positioning moves the inner popup content left 50% and down 50%. The transform then moves it left -50% of its own width and down -50% of its own height. This then enables the inner popup to be exactly centered no matter what the size of the screen.

/* Inner */
.popup-inner {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

The close button actually has a lot more styling rules than you’d expect. The reason it has a fon-family and font-size added is to make the popup work better across different projects. I highly advise using an icon font for the close button. For a good example, click the newsletter subscribe button at the top of the sidebar on this site. There’s also a transition on the button, this comes into play when you hover.

/* Close Button */
.popup-close {
	transition:ease 0.25s all;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(50%, -50%);
}

On hover, the button is spun around 180 degrees. If you put 360 degrees it will actually not look any different so 180 is what’s needed for the desired spinning effect.

.popup-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgba(0,0,0,1);
}

That’s it for the CSS. If you’ve got any question on what we covered so far, please leave me a comment below.


3.) Step 3: jQuery

Final jQuery

$(function() {
	//----- OPEN
	$('[data-popup-open]').on('click', function(e) {
		var targeted_popup_class = jQuery(this).attr('data-popup-open');
		$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

		e.preventDefault();
	});

	//----- CLOSE
	$('[data-popup-close]').on('click', function(e) {
		var targeted_popup_class = jQuery(this).attr('data-popup-close');
		$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

		e.preventDefault();
	});
});

The jQuery Explained

Do you remember those data attributes from the HTML? This is where they come into play. We first set up a click event on any of the open buttons and stop the default behavior, which in this case, would be to follow the link. If we don’t use e.preventDefault(); to stop the default behavior, a # will be added to the URL in the address bar.

$('[data-popup-open]').on('click', function(e) {
	e.preventDefault();
});

The next step is the grab the value from the attribute and save that information in a variable. The value saved will be whatever has been added to that buttons data-popup-open attribute. In our case the output will be popup-1.

var targeted_popup_class = jQuery(this).attr('data-popup-open');

Now comes the fun part, fading in the popup. The code below might look pretty scary but really, it’s quite simple. All it says is “find the popup with a data-popup value of popup-1 and fade it in for 350 milliseconds“. Also, because we’re using a variable, it save us from having to repeat the open functionality for each popup we create, as it’s dynamically found and used.

$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

Closing the Popup

Closing the popup is actually just a reverse of opening it. Instead of looking for the value of the open button we’re looking for the value of the close button. We’re also fading out instead of fading in.


In Conclusion

Custom popup modals can be incredibly powerful, but also far more annoying if used incorrectly. When implementing your popup modal please don’t have it to autoload. This is a big problem as it will cause people to never return, even if you remove the popup, because there only though of your site and brand is an annoying popup the second they open up some of your content.

Help and support: If you have questions and/or need help with any code, please leave a comment below with a link to a JSFiddle showing your code in action.

You might also like: Tooltips in HTML and CSS

Advertisement

Web designer and developer from Southampton, UK.


Leave a Comment

Comments (68)

Liam

23rd, Mar 2015 at 10:15 am

I never comment on things, but in the modern day web, you would most definitely not use jQuery alone with animations. NO! We have a non CPU hogging animation system. It’s called CSS3! Add a class and do your magic!

Reply

Seb Kay (Author)

23rd, Mar 2015 at 12:18 pm

I agree, CSS3 animations are the way forward. However, as I explain in the beginning of the tutorial, it’s aimed at beginners and I do state there are better ways to go about this. I’ll make it more clear in future tutorials.

Reply

James

9th, Apr 2015 at 3:08 am

as I can download “Create a Modal Popup Loading with jQuery” ??

Reply

Seb Kay (Author)

10th, Apr 2015 at 1:59 pm

Sorry but I don’t understand the question. Can you phrase it another way? 🙂

Reply

andrei

10th, Apr 2015 at 1:17 pm

can i use it like a wordpress plugin? is there a zip file to download?

Reply

Seb Kay (Author)

10th, Apr 2015 at 2:00 pm

There isn’t currently a download for the code above, but I’ll see what I can do about adding one.

Reply

Boum

10th, Jul 2015 at 10:32 am

Hello ! Very good tutorial but It doesn’t work with my wordpress website …
I have enqueue the jquery function in my functions file and added your css file in mine but it still not work …
Have you an idea why ?

My function code :

function popup(){

wp_register_script("popup", get_template_directory_uri()."/js/jquery.popup.js", array("jquery", "jquery-ui"), true);
wp_enqueue_script("popup");

}

add_action("init","popup");

Reply

Boum

10th, Jul 2015 at 11:40 am

I have found de solution ! I have not enqueued the jQuery files in the google library and not created a separated css file for the popup
Very good tutorial again !!!

Reply

Deepika

11th, Jul 2015 at 5:22 pm

hello
i am the very beginner of web site designing
so help me by answering my simple ques.
tell me whether the above programs are seperated program or a same one single program

Reply

Joe

19th, Jul 2015 at 7:41 am

Hi! Great tutorial, thanks!

I’m using Squarespace (Pacific theme) and the problem I am having with this is that the modal shows up, however the rest of the content on the page overlaps the popup – in other words, if you think of the page as layers, where the modal should be the top layer, it’s actually kind of showing up as a layer UNDER the rest of the page content. Hope that makes sense.

Any suggestions?

THANKS!
Joe

Reply

Joe

19th, Jul 2015 at 7:47 am

Me again!

Just put the html in the footer (as you suggested!) and it’s perfect!

This is so great! Thanks so much!

Joe

Reply

Vladimir

24th, Dec 2015 at 1:19 pm

Hi Joe
I’m using Squarespace too, but can’t seem to get this to work. Where do I place the codes. CSS, I know. But JQuery and HTML, no idea. I don’t understand “put the HTML code in the Footer” when I want the popup to show when a text in the body is clicked, not a text in the footer. Please help. Thank you very much!

Reply

Santiago

31st, Aug 2015 at 5:29 am

Hi bro ! , thanks for the post. It works great.The only thing is that the video keeps playing after you close the popup.
Ineed that the video stops , when i close the pop up.Is there any way to do that ? Thanks !

Reply

Chris

9th, Sep 2015 at 11:43 pm

I like the popup modal. I was wondering if this will work outside of Word Press? I am creating just a standard website with a folder call JS and CSS for the style sheet. The style sheet is Styles.css. It appears that the html, css, jquery is to be put into one page, I couldn’t get it to work. Any ideas on what to do to create a .js, do I need to name it something specific? on the html, do I just create a simple html with no head or title or body? Do I save it out to popup-1.html or is it supposed to go into the already written html? Can I put the CSS you have in my existing Styles.css? I would like to get it working but I am not experienced enough yet to know how to structure it into my site fully. thanks for any help!

Reply

Damir

15th, Sep 2015 at 9:46 am

I found this article accidentally and found it very useful. Just wanted to add to this article that the best practice would also be to add z-index:999 to a class .popup as than the bg will cover all other elements and popup will be in focus.

Reply

Olov Nilsen

9th, Oct 2015 at 11:12 pm

Really awesome tutorial. I can’t wrap my head around how the data attributes work. If one were to use id instead, how would one do, just in comparison? I would really like to get the full understanding of this great example.

Reply

Maha

29th, Nov 2015 at 2:53 pm

Great tutorial, Thanks you! ☺

Reply

Rahul

9th, Dec 2015 at 10:24 am

Awesome… nicely explained and I found it simple too. Thanks… bookmarked (y)

Reply

Mike

5th, Jan 2016 at 5:38 pm

I am wondering if you know if this will work with Squarespace sites given their structure. I cannot believe I cannot find a player that does not go full screen (using the grid layout in SS). It dominates the site with the video and at the end does not reduce or go away so the user must “x” out to see the site itself. Any help for a non css/JQuery guy.
Highest Regards.

Reply

Vladislav

5th, Jan 2016 at 11:05 pm

Hey, thanks for tutorial – it’s great and simple.

Could you please add a line of code, so I can click anywhere on black in order to close popup? it is kind of a usual UX thing, I guess.

Reply

John

18th, Jan 2016 at 11:11 pm

The popup is showing under other elements. I have tried changing the z index and also making it relative.

Reply

Arpit Goyal

28th, Jan 2016 at 6:24 am

The link to Fiddle is not working, it seems to be pointing to no snippet but landing page of JSFiddle.

Reply

Leon

30th, Jan 2016 at 7:19 pm

Great tutorial! I would like to incorporate in a website I manager for a nonprofit. I have the board of directors page with their photos and I would like a popup to be shown with the individual’s bio when their image is click. I tested it in liveweave.com and it works great but can someone explain how to use it in a wordpress site?
Thanks!

Reply

trisha

17th, Feb 2016 at 10:26 pm

Hi Seb

I implemented your code exactly in term CSS and JQuery and HTML I put my content but use the data class in the tutorial well no error render by online.js the JS editor I use but nothing showing up not even the link zero blank page. Do I need to use a google library

Reply

Rashid

7th, Mar 2016 at 12:04 pm

Can i open this popup with form submit button i tried to put the data-popup-open=”popup-1″ as submit button attribute but no success

Reply

Dhuny

8th, Mar 2016 at 10:31 pm

The Create a Fading Popup Modal with jQuery, was a good example to apply with buttons specially when to explain about the concept. I tried to fellow you instruction of the codes, but fail to make the pop up work. Do you have the complete codes to test it and play with it. Many thanks for your help.

Reply

Linnea

12th, Apr 2016 at 12:54 am

This is exactly what I was looking for! Thanks!

Reply

Markus Roberts

30th, Apr 2016 at 5:49 pm

This tutorial helped me a lot so thanks. Can you tell me how you’d modify the code to also close the modal window on pressing the esc key or clicking outside the modal window please.

Reply

Manu Mahesh

10th, Sep 2016 at 10:15 am

Here is the video tutorial for custom popup https://www.youtube.com/watch?v=zK4nXa84Km4

Reply

moshe

18th, May 2016 at 10:44 am

where shuld i put the code?
do i need the all 3 code or can i use only html?

Reply

JY

26th, May 2016 at 1:26 pm

Hi, I followed your instructions exactly, and they all worked (thanks a lot!) except strangely for the very last element. So I’m generating a bunch of buttons dynamically in jQuery, then attach the required classes and data attributes as you mentioned, along with your event handlers. All of them work and produce the pop-up, except the very last one which always seems to ignore the e.preventDefault(), and instead just adds the ‘#’ link in the URL, and doesn’t bring up the pop-up. Do you know why that’s the case?

Reply

Manu

16th, Jun 2016 at 6:16 am

i wanto load the popup when the page loading itself instead of clicking the button.thanks

Reply

Dexter

24th, Jun 2016 at 7:49 am

Thanks for this tutorial it is very helpful. But there is a problem with it when it comes to mobile devices the content is chopped of on the top and bottom and there is no way to close it. I think it is not responsive.

Reply

Prasanna

13th, Jul 2016 at 7:41 am

Excellent tutorial, thank you so much! I recommend adding z-index: 999; to .popup. That’s the only change I had to make.

Reply

janet

20th, Aug 2016 at 10:08 am

how to close the pop up on clicking outside??

Reply

jay

22nd, Aug 2016 at 5:30 pm

Hi there — I cannot seem to get the code to work, if localising the code:

https://jsfiddle.net/jd5am/cmtjyfLy/5/

Can you help?

Reply

Scott

16th, Dec 2016 at 1:46 pm

It will work if you add this line to your HTML code:

Jquery is a pre-req for this code.

Reply

Peter

2nd, Sep 2016 at 8:55 am

This tutorial is great, i have been your follower Seb and I see you have written great guides.
I was wondering will it be possible to add some translation in this model with css only like we see in jquery based models where they appear from right or fade away to right. This is just an example.

Reply

Son

11th, Sep 2016 at 1:54 pm

Very useful tutorial.

I suggest the followings:
– Add data-popup-close attribute to the parent div:
(inner div, and content, etc.)

– And in the JavaScript close event handler, add
if (e.target !== this) return;

This will allow clicking anywhere on the background (except the dialog itself) to close the dialog.

Reply

pratyush

19th, Sep 2016 at 10:23 am

how can make it open on window loading… also show when clicked on pop up open link

Reply

PR

30th, Oct 2016 at 3:09 pm

this is a great tutorial!
i have a video playing in the popup, when clicking on the X to close,, i need to pause the video and then close. how can that be done?
thank you!

Reply

shilpa

15th, Nov 2016 at 5:55 pm

How to access angular js scope values in this modal?

Reply

Lacey

15th, Nov 2016 at 9:50 pm

Wow! This was actually pretty easy. Thank you for taking the time to explain.

Reply

vurso

27th, Nov 2016 at 11:03 am

Great post a good basis for developing something further.

Reply

Akshara

16th, Feb 2017 at 12:06 pm

Wonderful code! Clean and easy to use! Thank you for sharing 🙂

Reply

Sowmiya P

21st, Feb 2017 at 5:52 pm

how to show a modal window or pop-up window after submitting contact us form?

Reply

kerrie

24th, May 2017 at 4:58 pm

Hello,

Is there a way to make this open upon page load? Thanks! Kerrie

Reply

Kerrie

24th, May 2017 at 5:32 pm

I saw after I posted my question you don’t recommend the modal show up on page load. This is how we’ve implemented it in the past, but we’re switching from Coldfusion to PHP. Sorry for asking the question before I saw your comment about it.

Reply

Jean-Pierre Harzdorf

22nd, Jun 2017 at 8:48 pm

Hi
I really like your popup-modal but I have to ask,

How can I make the modal close by clicking outside it?

Regards
Jean-Pierre

Reply

James Daniel

25th, Jun 2017 at 10:51 pm

Great code, works perfectly on some browsers. However, the modal popups don’t work on firefox? Is there additional code to work around this?

Thank you,

James.

Reply

Fooman

3rd, Nov 2017 at 8:56 pm

No asking questions for you. Just use the code as is.

Reply

Honey

27th, Jun 2017 at 8:49 pm

Hi, How can i trigger this popup with wordpress menu link

Thanks

Reply

Tori

26th, Nov 2017 at 6:05 pm

How can I adapt this so that when the transparent black background div is clicked, it closes out the modal like the x button does?

Reply

Tori

26th, Nov 2017 at 6:52 pm

How can I adapt this to where when you click outside of the modal (the transparent black background), it closes the modal just like the X button does?

Reply

stefan

2nd, Dec 2017 at 1:36 pm

the popup is not popping up as it suppose to…. I think the code might have an error… could you assist me??

Reply

Dili

8th, Dec 2017 at 4:42 am

code is not active, please check again

Reply

phil green

8th, Feb 2018 at 12:13 am

For those of you wanting to close it when clicking outside, put this third part into your function:


$(function() {
//—– OPEN
$(‘[data-popup-open]’).on(‘click’, function(e) {
var targeted_popup_class = jQuery(this).attr(‘data-popup-open’);
$(‘[data-popup="’ + targeted_popup_class + ‘"]’).fadeIn(350);
e.preventDefault();
});
//—– CLOSE
$(‘[data-popup-close]’).on(‘click’, function(e) {
var targeted_popup_class = jQuery(this).attr(‘data-popup-close’);
$(‘[data-popup="’ + targeted_popup_class + ‘"]’).fadeOut(350);
e.preventDefault();
});

$(".popup").click(function(){
$(".popup").fadeOut(350).removeClass("active");
});
$(".popup-inner").click(function(e){
e.stopPropagation();
});

});

Reply

Carmen Campos

2nd, Mar 2018 at 9:41 pm

Excelent! This was a very useful example for me. Thanks.

Reply

Pingbacks (2)

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.