Setting dialog overlay Jquery

I want to set the overlay of a jQuery dialog to an image, and can't seem to manage the task.

I have other dialogs on the pages that I want to no have the background images, so setting the css for the overlay background won't work as a blanket solution.

I have tried a lot of different methods, and I believe there is a timing issue with the appliction of the jQuery command to set the overlay with css and the actual dialog div's and css getting added 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 have also tried using the dialogClass method on the dialog code with no success.

With both the absolute url and the relative, and the url in quotes or with no quotes.

The image exists in the directory.

Anyone have any ideas on how to get jQuery to apply with the correct timing to display the image as the overlay?

Thanks开发者_如何学运维!

Update

The dialog class designation will allow you to set classes for the overal dialog. I was actually looking to just tap into the specific ui-widget-overlay class and over-ride the background image there. I found that trying to override the background using the dialogClass worked for overriding the background of the dialog, not the overlay background.

When the dialog is added to the DOM, jQuery loads it's div's right before the body tag.

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

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

to add a class

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

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

I hope this helps someone.

Thanks and +1 to jjross, your answer got me to jump back into the jQuery docs.

If anyone has a better solution, please post. I would be happy to see it. I think there might be a way to use CSS to accomplish the task, but (for the life of me) couldn't figure it out.

You should be able to add the class to the div in your HTML code prior to jquery being called on it. In my testing, this automatically added that class to the dialog when it was created.

In the new class, you should be able to specify a background image.

For example:

calling:

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

on

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

causes the dialog to be created with the "thisClass" class.

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

The specified class name(s) will be added to the dialog, for additional theming. Code examples

Initialize a dialog with the dialogClass option specified.

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

Get or set the dialogClass option, after init.

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

I encountered the same problem and found In this case your question. I didn't find any 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 kinds of dialogs. Dialogs with video and dialogs with message (like alert, confirmation, error etc.). As we know, we can set a different class for a dialog, but we can't set class for different overlay. So question was, how to set a different behavior for different overlays?

So I dig, I dig deeper than Dwarves in Moria into jQuery ui code itself. I found out, that actualy there is an unique overlay for each dialog. And it is created in "private" function _createOverlay which is not accessible. In fact, I found function via jquery ui namespace as $.ui.dialog.prototype._createOverlay. So I was able to make a small extension with logic based on class:

(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
            });
        }
    };
})();

I hope this will help others :)