How to integrate a modal dialog

I want to show AJAX error messages for form validation and want these messages centered on the screen. I was advised to use a modal window for this. I have the following code but I'm not sure how to do this. I know that I need to call the modal in the success function but unfortunately that's about the extent of my JQ knowledge.

This is my JQ script where the modal should be inte开发者_如何学Cgrated

  success: function(data){
    ...
    if(data.success == 0){
      $(div).addClass('ajax-error');
    }

This is the modal code. This code is currently set up to work with a hyperlink that activates the window but I don't need that. The window should be invoked automatically upon error in the code above.

  $('a[name=modal]').click(function(e) {
    e.preventDefault();

    var id = $(this).attr('href');

    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask').css({'width':maskWidth,'height':maskHeight});

    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);

    var winH = $(window).height();
    var winW = $(window).width();

    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    $(id).fadeIn(2000);
  });

  $('.window .close').click(function (e) {
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
  });

  $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
  });

I would check out the jQuery Model Dialog Plugin.

The documentation is a bit sparse, but the demo page and your friends Firefox and FireBug will paint a pretty complete picture.

It has the AutoClose feature you want.

The plugin applies an opaque mask and has DIV styles such as "dialog-header," "dialog-title," and "dialog-close" to allow you to style the appearance.