Displaying Popup using Jquery and css3. Articles, samples and tutorials

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";
                            }
                        },

by putting the comma you can add mutiple buttons.

see the confirm.js file there (dont do any modification until unless you want to do transition

effects.
for ex. see this statement $(markup).hide().appendTo('body').show();
here instead of show if you want any transitions like display slow or fast or fadein or fadeout

you can do that.

so below you can see the attached files.

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.