Popup are becoming more and more visible in designs, also known as lighbox and modal window in developers' language. They got some countless advantages and well you need some strong layout to build your website, like a modal window which let you content organized.
Basically modal window doesn't need to reload the page to show, adding a few lines of JS and CSS would make it appear. However, AJAX content might need a loader to show your stuff, otherwise the content exist in DOM as the page loads.
Most common uses
Well, popup are easier way to attract so there are following uses of popups.
Marketing blogs, often belonging to any organization or community uses popups for marketing purpose. For example: a new offer. Any achievement, accomplishment or after winning any award you can observe those flying popups all over the site.
Bloggers use popups for social purposes, often contains social profile link to follow or subscribe. However it is not a preferred way because, everyone is not as social as we pretend. A new meetup, any seminar or any hire me popups are normal on blogs. Search button also gives out a popup.
 |
| Sara Soueidan's Blog search popup, a full-screen popup |
Social media sites uses popups in best possible way. Notifications that includes likes, comments, tweets and reactions by followers are normally shown in popups. They are quicker way of notification. Un-follow a user, unfriend a friend or sharing something on social media never reloads the page instead they are always shown in popups. This creates a strong connection between a user and site because user never reloads the page.
 |
| Twitter screenshot while composing a tweet |
Many sites, not specific, uses pop ups for purpose like warnings, success message or alert messages. For example, on click on download button on Google Chrome site a popup appears with agreement and some permissions. Do you know what? If a person visits that site with older browser he wouldn't be able to download Chrome because older ones does't support many kind of pop-up and stuff. However, we shouldn't do more care of older browser users.
Forms are one of the most popular use of modal window, the main reason is that when a user quickly wanted to login for some reason like comments, like and especially while shopping then modal windows or popups plays an important role in that design.
Videos, photos and memes all can be found under modal window, later in this post you will find some great lighbox plugins to just put your stuff under modal window with just a few lines of code. They just magnify your photos and give user a free space to watch videos seamlessly.
The jQuery for that:
Forms are one of the most popular use of modal window, the main reason is that when a user quickly wanted to login for some reason like comments, like and especially while shopping then modal windows or popups plays an important role in that design.
Videos, photos and memes all can be found under modal window, later in this post you will find some great lighbox plugins to just put your stuff under modal window with just a few lines of code. They just magnify your photos and give user a free space to watch videos seamlessly.
Basic kind of pop-up
Have a look at illustration below:
 |
| This is a simple page with content |
A basic pop-up can be created with HTML is:
Recommendation is to use fixed size pop-up, because to center it you need to use negative margin. Position should be fixed in order to get pop-up on screen, no matter weather user is at top or bottom on the page, it will be display on screen.
If you wanted to add a semi-transparent black layer before pop-up then a bit changes will be done:
<body>
<div class='popup'>This is pop-up content</div>
<div class='main'>This is the page content</div>
</body>
.popup {
position:fixed;
top:50%;
left:50%;
height:200px;
width:200px;
background:#eee;
margin:-100px 0 0 -100px;
}
 |
| This is a popup |
Recommendation is to use fixed size pop-up, because to center it you need to use negative margin. Position should be fixed in order to get pop-up on screen, no matter weather user is at top or bottom on the page, it will be display on screen.
If you wanted to add a semi-transparent black layer before pop-up then a bit changes will be done:
<body>
<div class='popup'>This is pop-up content</div>
<div class='overlay'></div>
<div class='main'>This is the page content</div>
</body>
.popup {
position:fixed;
top:50%;
left:50%;
height:200px;
width:200px;
background:#eee;
z-index:3;
margin:-100px 0 0 -100px;
}
.overlay{
position:fixed;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
 |
| This is a example with layer |
The easiest and simplest way I ever found is to fade in and fade out using jQuery. Below is one of my demo I made for one of my post before. It demonstrates modal pop-up correctly.
If you wanted to do CSS3 animation then add class to pop-up and they do your animation on that class.The jQuery for that:
$('.clickme').click(function(){
$('.overlay,.popup').addClass('active');
});
.popup {
position:fixed;
top:50%;
left:50%;
height:200px;
width:200px;
opacty:0;
visibility:hidden;
background:#eee;
z-index:3;
margin:-100px 0 0 -100px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.overlay {
position:fixed;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
visibility:hidden;
opacity:0;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.popup.active {
opacity:1;
visibility:visible;
}
.overlay.active {
opacity:0.8;
visibility:visible;
}
Scaling, fading, rolling, translate are some kind of simple animations. 3D transition could be created with CSS3, however open and closing need to Javascript or jQuery. You can find great pieces of transition right here.
Closing is quite easy, well depending on your type of pop-up. If you added active class on pop-up then just remove class and it will remove pop-up. Having a close button is not necessary to close pop-up, an overlay behind pop-up are the best agent to close pop-up.
You Might Also Like:
Closing is quite easy, well depending on your type of pop-up. If you added active class on pop-up then just remove class and it will remove pop-up. Having a close button is not necessary to close pop-up, an overlay behind pop-up are the best agent to close pop-up.
You Might Also Like:
- CSS3 transition effect tips for better animation
- How to create a lava lamp navigation with drop down menu?
- Handle sticky header finely with Headroom.js
- Glance over Javascript's Object Oriented behaviour
- Javascript Closure and nested function
Most popular jQuery plugins for Pop-up
Following are some of the plugins I found to complete all the necessary needs for modal window, as I mentioned pop-up, dialog and light box, all are preferred same.
rmodal.js
Maginific Popup
jBox
Custom Box
bPopup
ColorBox
Popup using jQuery UI
Commonly, I never discuss jQuery UI in fact this is the first blog post with jQuery UI label. The important reason is the size of source code. However, dialog boxes are also available in jQuery UI and best part is that they are quite easy to use.
show: {
effect: "slide", /* Effect while showing popup */
duration: 1000 /* Animation duaration */
}
hide: {
effect: "fade", /* Effect while showing popup */
duration: 1000 /* Animation duaration */
}
<div class='popup' title='Some Title'>This is the content</div>
Design practices to follow with modal window
Modal window needs to be followed with some design practices for its completion. Here are some of them.
1. Use arrows
Arrows help to navigate through images, often galleries. This helps user to quickly go through your photos of single gallery with just a few clicks. Arrows will only appear in modal window when showing photos and arrow will trigger another modal window.
As I've mentioned above a jQuery lighbox plugin, Magnific popup. This one contain arrows for galleries. Well you can read its full spec on its site.
2. Close Button
A black layer behind popup always doesn't help because many of us even doesn't know that by clicking the layer outsite you can close a popup. Having a close button is a direct indication of closing the popup.
Close button will have a cross sign, which is a universal indication of exit. SVG, font or image use whatever you want, its just a button.
3. Separate main content from window
In the case you aren't using a layer, then do add something to separate your main content from popup. Blur background, use different color in popup or use box shadow so that user can distinguish between both of them.
4. Loader for heavy images or asynchronous content
Async content is not a new thing but modal windows that loads some heavy images or asynchronous data from server doesn't matter heavy or light, it requires some time to take that from server. No one knows that how much faster the internet connection a user is using or how much time server would take to give response. As a pre-caution do add a loader, which makes a sense that something is loading here. Otherwise user will close popup immediately when no content appears.
Conclusion
Social Media sites to personal blog, you will observe modal window to countless sites. Alert, messages, notification, confirmation and countless advantages you gain while using modal window. Modal window got importance in modern design. I shared everything I experienced about modal window yet, whats your point of view, I will be waiting for comments.
Post A Comment:
0 comments: