Displaying Popup using Jquery and css3.

A popup Box which is fully Customizable using css3 and jQuery.

Generally we see in websites when a we cliked on purachse buton then it wil show beautiful

confirmation dialog which is having some buttons and showing yes or no and cancel and some

other messages with images. We see that how it is doing. Generally we can do it with javascript

using div ( this also i will post in the next article and gave many responses regarding this

already) but a small animation effect and beautifully designed one wich is fully customizable

is different than normal one. Now here i am posting a resource which is very useful and

customizable who wants to use this.

Here i used to search many resources and find a good one and changed it according to me with

small additions. I used Jquery for this.
workflow.

1)first download the application which is attached below.
2)in the downloaded zip file extract to the desktop and there in hte extracted folder contains

solution file also, you can directly run it. it is vs2010 with 3.5 framework.
3)see the folder contains confirm named folder and scripts folder.
4)scripts folder contains jquery scripts which is used to run jquery.
5)confirm folder contains the images and css and js files for showing the popup.
6)now look at the Deafult.aspx file and goto the script section there you can see the code for

creating buttons and which message and title to show in the popup. and what should happen when

you press ESC key in keyboard.

Customizing popup.

here you can add how many button you want you can and give the value and what action should be

done when it clicks.
for ex.

'buttons': { //for creating the buttons.
                        'Yes': {
                            'class': 'blue',
                            'action': function () {
                                elem.slideUp();
                                document.getElementById('<%=TextBox1.ClientID%>').value = 

"clicked Yes";
                            }
                        },

$(markup).hide().appendTo('body').show();