In the recent web development design trends, Modal window has emerged as a very new and fresh concept. Modal window is a kind of dialog box/popup that i displayed on top of the current page. In this post you will find to create a attractive modal window using only pure CSS and HTML concepts.
Creating the index page:
Create HTML page with any name and add following sample code.
Now inside the body section, put a link which when clicked will invoke the modal window.
So lets create a DIV and give it proper name. This DIV will serve as the modal window. Inside the DIV tag put some text and a link to cancel the modal window.
Just save the HTML file and final HTML will look like this.
Now create a separate CSS file and name it as “mystyle.css“. Select the code below and paste it in the file.
Just save the code and run the HTML file in browser. You should be able to see the modal window in browser upon clicking the link.
That’s it for now ! Stay tuned for more CSS tutorial here.