Creating a simple modal window using pure CSS

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s