Popup modal is a basic functionality that every one uses in their websites.But using JavaScript or a jquery framework for popup forms is not really needed when we can do awsome popup forms in css (css3) itself.Most importantly ,It is supported in all major browsers that support css3.This is going to be a tutorial about how to build popup login forms or sign up forms or else popup image galleries using pure css only.
popup box
In order to use the popup box you need to just add a css file(popup.css) which you can download below.
Add the css file
<link href="popup.css" rel="stylesheet"/>
In order to show a sign up form in popup you just need to add the following sign up form codes in to the popup div like given below
<div id="overlay">
<div id="popup">
<!-- ANY CONTENTS CAN BE USED TO SHOW IN POPUP EG LOGIN FORM,SIGNUP FORM,IMAGE -->
</div>
</div>
Further to trigger the popup , you need to add a link in the page where ever needed as bellow.(ie) a clickable button for the popup
<a href="#overlay" id="button">LOGIN</a>
Make sure you dont change the name of the id’s .
And for your surprise , your popup modal is ready with pure css only.You could check out the demo for further guidance in the usage.Feel free to reuse the code in any of your project.Follow our blog for future updates.
