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.
The HTML
To Trigger the modal, You will be needing a Action, What will be done with a link. A Anchor.
|
<a href="#openModal">Kick The Modal</a> |
So, Now we need the Content of The modal,
|
<div id="openModal" class="modalBox"> <div> <a href="#close" title="Close" class="close">X</a> <h2>I am a Modal</h2> <p>I am Very Useful, if you know where to put me </p> <p>You Surely want something Cool, I am freezing </p> </div> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
|
.modalBox { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalBox:target { opacity:1; pointer-events: auto; } .modalBox > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } |
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.