October 30th 2008

Inserting Content Using jQuery SimpleModal Plugin Demo

I decided to continue to the next logical step using the jQuery SimpleModal plugin. In the last post I used it to show a modal delete confirmation and in this post I am going to demonstrate the plugin as a way to insert new data in the form of a new customer record.

Live Demo | Download (HTML, CSS, JavaScript)

End Product:

End Product Image

Adding the popup was pretty straight forward. After I added the required jquery and css files, I just had to add the html markup for the container to be called as well as the fields and ASP.NET validation controls shown in the image above. Once that was setup, I added the jQuery necessary to open and close the popup with animations as well as call the hidden button that actually causes the postback once the data has been validated.

I really tried to comment the jQuery in this post in the hopes it might help you better understand what is going on.

Be sure to checkout the demo and let me know in the comments what you think could be improved :)