JQuery modal popup on specific region

Question

I have a grid and when i change its sorting order i a loading message appear on grid region and block its content like other modal popup but only on grid region is there any available jquery modal popup meet my needs ? can I configure jqueryUI modal to do this ?

Answer 1

yes jquery UI modal can do this

http://jqueryui.com/demos/dialog/#modal

Answer 2

This is very easy to do with jQuery UI. With the ajaxStart and ajaxStop functions, you can even set up your dialog and forget about it and it will appear every time you use an ajax request on the page. Here's an simple example:

$('#ajax-load').html('<p><img src="images/ajax-loader.gif">').dialog({
  autoOpen: false,
  draggable: false,
  modal: true,
  position: 'center',
  resizable: false,
  closeOnEscape: false,
  open: function(event, ui) {
    return $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //hide the close button
  }
}).ajaxStart(function() {
  return $(this).dialog('open');
}).ajaxStop(function() {
  return $(this).dialog('close');
});

Edit: Oh, you want it for a specific region. That should be possible, but I don't know how to do it off the top of my head. iframes? ;-)

Answer 3

You're looking for jQuery BlockUI, a jQuery plugin that can block the page or an element while loading.