Einstellung Dialogfeld Overlay Jquery

Question

Ich möchte die Überlagerung eines jQuery-Dialogfelds zu einem Bild festlegen, und scheint nicht die Aufgabe zu verwalten.

Ich habe andere Dialoge auf den Seiten, die ich nicht die Hintergrundbilder haben möchte, so dass die CSS für den Overlay-Hintergrund einstellen wird nicht als umfassende Lösung arbeiten.

Ich habe viele verschiedene Methoden ausprobiert, und ich glaube, es gibt ein Timing-Problem mit der Anwendung des Befehls jQuery, um das Overlay mit CSS und die tatsächlichen Dialog divs und css zum DOM hinzugefügt werden.

Hier ist was ich bisher versucht habe.

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

ODER

$("#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'}) 
    } 
}); 

Ich habe auch versucht ohne Erfolg die dialogClass Methode im Dialogcode.

Mit der absoluten URL und der relativen und der URL in Anführungszeichen oder ohne Anführungszeichen.

Das Bild existiert im Verzeichnis.

Haben Sie irgendwelche Ideen, wie Sie jQuery mit dem richtigen Timing anwenden können, um das Bild als Overlay anzuzeigen?

Danke!

aktualisieren

Der Dialog Klassenbezeichnung ermöglicht es Ihnen, Klassen für die overal Dialog zu setzen. Ich wollte eigentlich nur auf die spezifische ui-widget-overlay-Klasse tippen und das Hintergrundbild dort übersteuern. Ich habe festgestellt, dass das Überschreiben des Hintergrunds mithilfe der dialogClass zum Überschreiben des Hintergrunds des Dialogfelds und nicht zum Überlagern des Hintergrunds verwendet wurde.

Wenn das Dialogfeld zum DOM hinzugefügt wird, lädt jQuery seine Divs direkt vor dem Body-Tag.

fand ich eine Lösung, die für den Dialog in der offenen Methode zu sein, ich

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

eine Klasse

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

und sorgte dafür, dass es war die letzte Klasse in der Datei hinzuzufügen, verwendet Das würde das Overlay-Hintergrundbild überschreiben.

Ich hoffe, das hilft jemandem.

Danke und +1 zu jjross, Ihre Antwort brachte mich dazu, in die jQuery-Dokumentation zurückzuspringen.

Wenn jemand eine bessere Lösung hat, bitte posten. Ich würde mich freuen, es zu sehen. Ich denke, es könnte einen Weg geben, CSS zu benutzen, um die Aufgabe zu erfüllen, aber (für das Leben von mir) konnte es nicht herausfinden.

Answer 1

Sie sollten die Klasse zum Div in Ihrem HTML-Code hinzufügen können, bevor jquery aufgerufen wird. In meinen Tests fügte das automatisch diese Klasse dem Dialog hinzu, als es erstellt wurde.

In der neuen Klasse sollten Sie in der Lage sein, ein Hintergrundbild anzugeben.

Zum Beispiel:

calling:

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

auf

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

bewirkt, dass der Dialog mit der "thisClass" Klasse erstellt werden.

als eine alternative Option, sieht es so aus, als ob der Dialog eine "dialogClass" -Methode hat. Dadurch können Sie dem Dialog eine eigene Klasse hinzufügen (in dieser Klasse können Sie den Hintergrund definieren). Aus der Dokumentation:

Die angegebenen Klassennamen werden dem Dialog für zusätzliche Themen hinzugefügt. Codebeispiele

Initialisieren Sie einen Dialog mit der angegebenen Option dialogClass.

Holen oder setzen Sie die Option dialogClass nach init.

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

Answer 2

Ich stieß auf das gleiche Problem und fand in diesem Fall Ihre Frage. Ich habe keine Lösung gefunden, die mich befriedigen könnte, also habe ich etwas alleine gemacht.

Zunächst möchte ich mein Problem vorstellen.

Ich habe eine Seite, wo ich habe zwei Arten von Dialogen. Dialoge mit Video und Dialoge mit Nachricht (wie Alarm, Bestätigung, Fehler etc.). Wie wir wissen, können wir eine andere Klasse für einen Dialog festlegen, aber wir können keine Klasse für ein anderes Overlay festlegen. Also war die Frage, wie man ein unterschiedliches Verhalten für verschiedene Overlays einstellt?

Also ich graben, graben tiefer als die Zwerge in Moria in jQuery UI-Code selbst. Ich fand heraus, dass es tatsächlich für jeden Dialog ein einzigartiges Overlay gibt. Und es ist in "private" -Funktion erstellt _createOverlay, die ist nicht zugänglich. Tatsächlich fand ich Funktion über jquery ui Namensraum als $.ui.dialog.prototype._createOverlay. So konnte ich eine kleine Erweiterung mit Logik auf Klasse basiert machen:

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

Ich hoffe, das andere helfen :)