Blogger Ever

Modal window and the stuff

Modal window in modern design and all the stuff related to it, including coding and dialog box in jQuery UI.

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.

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:

<body>
    <div class='popup'>This is pop-up content</div>
    <div class='main'>This is the page content</div>
</body>
The CSS would be:

.popup {
    position:fixed;
    top:50%;
    left:50%;
    height:200px;
    width:200px;
    background:#eee;
    margin:-100px 0 0 -100px;
}
This is the most basic popup version you will see. This contain a main content and popup which stays on screen, since have position fixed. Well, opening and closing is discussed later in this post.

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>
CSS would be:

.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 layer will distinguish between the main content and pop-up.

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.
See the Pen Popup Handling by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
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');
});
CSS for pop-up would be:

.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;
}
The CSS on click would be:

.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:


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.

See the Pen PqjVNb by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
This one is quite simple demo of dialog box by jQuery UI, you can have several options to opt-out the best from it. Some of them are listed below, while you can check full description on it, here.

show: {
        effect: "slide",     /* Effect while showing popup */
        duration: 1000     /* Animation duaration */
      }
The above one is while popup / dialog starts to appear. Below one is for hiding.

hide: {
        effect: "fade",   /* Effect while showing popup */
        duration: 1000  /* Animation duaration */
      }
If you wanted to add a title on dialog box then just add title attribute on the dialog div.

<div class='popup' title='Some Title'>This is the content</div>
I would prefer not to use jQuery UI just for dialog, unless you got some other reason to do so. There are many plugins out there (some are mentioned) for this purpose better use them or create your own.

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.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.