Drupal and jQuery Plugins (ie tools) - overlay - mask isn't working - suspect javascript issue

Question

G'day all,

I've implemented the demo available at http://flowplayer.org/tools/demos/overlay/modal-dialog.html in a hook_menu to test (note that this is the jquery tools plugin, available via the module jquery plugins). Everything works fine with the exception of the mask, I cannot get it to work.

The only difference between the example javascript on the above link and what I'm using is that I had to encapsulate the javascript with the following:

(function($){
  $(document).ready(function() {
    <demo javascript code goes here>
  });
})(jQuery);

The demo code appears to be using:

var triggers = $(".modalInput").overlay({
  // some mask tweaks suitable for modal dialogs
  mask: {
    color: '#ebecff',
    loadSpeed: 200,
    opacity: 0.9
  },
  closeOnClick: false
});

Which all makes sense to me and I cannot see why it wouldn't work.

My version of the javascript is (I removed one button): http://pastebin.com/MH6ehmTR My version of the html is: http://pastebin.com/aW6UpFBQ My version of the css is: http://pastebin.com/tUQWDqZp

The html is taken from the generated html by drupal.

The reason why I need this fixed is to disable access to the rest of the page while the dialog box is open (thus becoming modal). The current situation is that a person can interact with the rest of the page while the dialog is open.

FYI the browser is firefox, it works for the demo code, just not for the drupal implemented one. Also the method of getting jQuery tools overlay available is via the jQuery plugins module.

Answer 1

I had a similar problem where the overlay was displayed in IE7, no elements on the page displayed, including close button. All elements were behind the mask. Adding this in the overlay() settings solved the issue:

onLoad:  function() {
  this.getOverlay().insertAfter('#exposeMask');
}

now the login popup in my site riparotto works fine.