Customizing the jQuery Dialog

Question

I want to set the jQuery dialog overlay on the image and can not cope with the task.

I have other dialogs on pages on which I do not want to have background images, so setting css for the overlay background will not work as a protective solution.

I tried many different methods and I believe that there is a problem of synchronizing with the jQuery command application to set the overlay using css and the actual div dialog and adding css to the DOM.

Here is what I have tried so far.

$('#submitUpload').click(function(){ $("#uploadStart").dialog('open'); $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'}) $("#uploadForm").submit(); }); 

OR

 $("#uploadStart").dialog({ autoOpen: false, width: 400, modal: true, closeOnEscape: false, draggable: false, resizable: false, open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'}) } }); 

I also tried using the dialogClass method in the dialog code without success.

Both with an absolute url, and with relative, and url in quotes or without quotes.

Image exists in the catalog.

Does anyone have any ideas on how to get jQuery to apply with the correct time to display the image as an overlay?

Thanks!

Update

The dialog class designation allows you to set the classes for the advanced dialog. I actually wanted to just click on a specific ui-widget-overlay class and move the background image. I found that trying to override the background using dialogClass worked to override the background of the dialog, rather than overlay the background.

When a dialog is added to the DOM, jQuery loads its div right before the body tag.

I found a solution, which is that in the open method for the dialog I used

 $(".ui-widget-overlay").addClass('artFTP'); 

add class

 .artFTP{background-image: url(../../images/ftp-page-bg.gif); opacity:1;} 

and made sure that it was the last class in the file to overwrite the background image of the overlay.

Hope this helps someone.

Thanks and +1 for jjross, your answer made me return to jQuery docs.

If anyone has a better solution , send a message. I would be glad to see that. I think there might be a way to use CSS to accomplish the task, but (for my life) could not figure it out.

Answer 1

You must add the class to the div in your HTML code before jquery is called on it. In my testing, this automatically added this class to the dialog when it was created.

In the new class, you must specify a background image.

For instance:

vocation:

 $("#dialog").dialog(); 

about

 <div id="dialog" class="thisClass" title="Edit Case Status"> <div>some stuff</div> </div> 

invokes the creation of a dialog using the class "thisClass".

as an alternative, it looks like the dialog has a "dialogClass" method. This will allow you to add your own class to the dialog (in this class you can define the background). From the docs:

The specified class name will be added to the dialog for additional topics. Code examples

Initialize a dialog with the specified dialogClass option.

 $( ".selector" ).dialog({ dialogClass: 'alert' }); 

Get or set the dialogClass parameter after init.

 //getter var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" ); //setter $( ".selector" ).dialog( "option", "dialogClass", 'alert' ); 

Answer 2

I ran into the same problem and found your question in this case. I did not find a solution that could satisfy me, so I did something on my own.

First, let me introduce my problem.

I have a page where I have two types of dialogs . Dialogs with video and message dialogs (for example, warning, confirmation, error, etc.). As we know, we can set another class for the dialog, but we cannot set the class for another overlay. The question is, how to set a different behavior for different overlays?

So, I rummage, I dig deeper than the gnomes in Moria into jQuery ui code. I found out that there is actually a unique overlay for each dialogue. And it is created in the "private" function _createOverlay, which is not available. In fact, I found the function through the jquery ui namespace as $.ui.dialog.prototype._createOverlay . Therefore, I was able to make a small extension with class-based logic:

 (function() { // memorize old function var originFn = $.ui.dialog.prototype._createOverlay; // make new function $.ui.dialog.prototype._createOverlay = function() { originFn.call(this); // call old one // write your own extension code there if (this.options["dialogClass"] === "video-dialog") { var overlay = this.overlay; // memorize overlay (it is in old function call as this.overlay) var that = this; // just cause bind is event // my own extenstion, when you click anywhere on overlay, dialog is closed + I change css overlay.bind('click', function() { that.close(); // it is same like element.dialog('close'); }).css({ "background": "none", "background-image": "url(\'files/main-page/profile1.png\')" // this didnt work for you, but works for me... maybe I have newer version of jQuery.UI // anyway, once you have overlay as variable, Im sure you will be able to change its css }); } }; })(); 

Hope this helps others :)