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.

Demo |Download

End Product:

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.

<script type="text/javascript">
    $(document).ready(function() {

        $("#addNewCustomerImg").click(function(ev) {
            ev.preventDefault();
            
            //Clear the textboxes from the last time the popup was opened especially in the case where
            //your using the same popup to edit data
            $("#TextBoxContactName").val("");
            $("#TextBoxContactTitle").val("");
            $("#TextBoxCountry").val("");
            $("#TextBoxPhone").val("");

            //Open the popup container
            $("#addNewCustomer").modal({
                onOpen: modalOpenAddCustomer,
                onClose: modalOnClose,
                persist: true, //!!!Very important when using with ASP.NET so that data is sent back to the original container so it can be 
                    //found on postback
                containerCss: ({ width: "500px", height: "275px", marginLeft: "-250px" }) //Controls the size of the popup - overrides the 
                //sizes set in the css
            });
        });

        $("#addNewCustomerInstructionsImg").click(function(ev) {
            //Hides or shows the instructions div
            toggleAddCustomerInstructions();
        });

        $("#addNewCustomerInstructionsLink").click(function(ev) {
            ev.preventDefault();
            
            //Hides or shows the instructions div
            toggleAddCustomerInstructions();
        });

        $("#addNewCustomerInstructionsClose").click(function(ev) {
            ev.preventDefault();
            
            //Hides or shows the instructions div
            toggleAddCustomerInstructions();
        });
                
    });

    function modalOpenAddCustomer(dialog) {
        //Animate the open of the popup
        dialog.overlay.fadeIn('fast', function() {
            dialog.container.fadeIn('fast', function() {
                dialog.data.hide().slideDown('slow');
            });
        });
        
        //Set the title of the popup. Could hard code if only using popup for inserting data
        dialog.data.find(".modalheader span").html("Add New Customer");

        // if the user clicks "yes"
        dialog.data.find("#ButtonAddCustomer").click(function(ev) {
            ev.preventDefault();

            //Perfom validation by triggering the ASP.NET validaters
            if (Page_ClientValidate("addCustomer")) {
                //The popup must be closed first so that the data makes it back to its original container prior to postback
                $.modal.close();
                
                //Button that causes the postback
                $("#ButtonHiddenAddCustomer").click();
            }
            
        });
    }

    function toggleAddCustomerInstructions() {
        Handles the hiding of the instructions and fields in the popup
        $("#addNewCustomerFields").toggle();
        $("#addNewCustomerInstructions").toggle()
    }

   function modalOnClose(dialog) {
        //Animates the closing of the dialogs
       dialog.data.fadeOut('slow', function() {
           dialog.container.slideUp('slow', function() {
               dialog.overlay.fadeOut('slow', function() {
                   $.modal.close(); // must call this to have SimpleModal                   
                   // re-insert the data correctly and
                   // clean up the dialog elements
               });
           });
       });
    }    
                                   
</script>

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