Today i am going to explain you how we can create a simple popup using jquery, html and css. JQuery is very powerful tool for web designer we can do magic with jquery and css today on web. This post explain you how to create a popup which support draggable and easy to create.

DEMO

Code:
First we need to add some jQuery library which we use to create popup.

I am using  jQuery default library from Google CDN  and use jQuery UI library from jQuery CDN to enable drag support in my popup. Now after adding these jQuery in my project i design my popup.

HTML Code

This is a simple html popup i make in this we have a light background and design a simple popup with header contain title bar and cancel button and in popup body i add simple paragraph, you can add your form for user input or for file uploading etc.

CSS for POPUP

I make a simple design for my popup i use simple css  property which is easy to understand and call these class in html code to make my popup look nice.

jQuery

Now its time for real work i create id in my html tags. Start from Button when ever user click on button click event is occur and using jQuery we handle that event and display popup background and popup .

When document is loaded completely after that we can handle any event.

Now when user click on popup button we can show our popup. I also create a function to adjust my popup in center of screen.

To enable brag support i call this default jQuery function.

When ever user click on title bar of popup and try to move it and it will move.

Complete Code: