CSS3 Modal – The Smart Way

So I believe You must have Heard about modal. IF not, I can bet you have already seen it, Just don’t know what it was. Lets just say, One of your Facebook Status got 50 Likes, Now you wanna see, By whom. Like ” Bill Gates, Linus Torvalds, Mark Shuttleworth And 47 others like this“. You will click on ” 47 Others like this ” and a box will come up, With the name of all those people liked it. Basically that box is a smart Example of HTML modal. Its one Kind of Inside Pop-up Window. You can use it for Login box, For Ads, For Information, For Anything. Now There are a lots of jQuery Stuff to create a model. Even The Great Bootstrap Has a modal built in. By the Way, Some people Even Call it Dialog ( As jQuery Officials Did ) .

Here is Some nice Example And link of JQuery Modal Aka Dialog [ Link ] .


Our Way

But, The Awesomeness of HTML5 And CSS3, Opened a new era of Web Development. Now, You can do the Complex work with jQuery or Simple Javascript [ If you prefer working much ]. Ad leave the Design Section to CSS3. Well, We will make a Similar modal with CSS3. So, if the client Browser Failed to load jQuery [ Lets just guess Google Was Sleeping ], Your Modal Will still work.

So what do we need? Nothing. Just get a Text Editor, Anything you prefer and Let set go.


To Trigger the modal, You will be needing a Action, What will be done with a link. A Anchor.

So, Now we need the Content of The modal,

Remember, The Model Will be triggered using the anchor, So you have to carefull about choosing the model ID.

 The CSS

So, Lets Kick some CSS.


Well, The Code is Pretty Clear, If you know what you are doing actually. Now Lets Get a Live View of It,



Hope You find It useful.