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.