How to load ajax data in popup

[xpersa]

Hello i am a new in ajax and jquery and have an issue. I use ajax and php to validate details provided in form and i check them also i make some queries to database (Mysql - if user exist etc.). So when i get back the result from server i want them to be displayed in a popup. I hope someone will help me ... Here is my jquery code:

 

$(document).ready(function(){
    $('#form-sub').submit(function(){
        
        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){
        
            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('p.signup-response');
            
            //add status data to form
            form.data('formstatus','submitting');
            
            //show response message - waiting
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);
            
            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){
                    
                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';
                    
                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;    
                    }
                    
                     
                   //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(200,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },3000)
                                });
                    });
                }
            });
        }
        
        //prevent form from submitting
        return false;
    });
});

 

So as you can see i get response-error or response-success. If it's an error i want it to be displayed in a modal popup and if it's succedd redirect to next page where will be displayed a message. Any idea how to do that ? I don't know how to change the  code below //show reponse message

 

 

 

 

[Lautarox]

If you want a kind of pop up, you can use color http://colorpowered.com/colorbox/, a jquery plugin.

.text(responseData.message) is placing the text shown when validating.