wake-up-neo.com

jQuery UI: Wie benutzt man UI-Widget-Overlay alleine?

Ich versuche, ein Overlay zu erstellen, ähnlich dem, das von jQuery UI Dialog verwendet wird. Ich kann das Overlay so erstellen:

var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

//...later in my script
$overlay.fadeIn();

Die Überlagerung wird jedoch abgeschnitten, wenn ich nach unten scrolle. Mir ist aufgefallen, dass die jQuery-Benutzeroberfläche die Breite und Höhe für dieses Div dynamisch einstellt. Daher möchte ich diese Funktionalität wiederverwenden, anstatt das Rad neu zu erfinden. Wie kann ich ein solches Overlay erstellen oder das Overlay in der jQuery-Benutzeroberfläche wiederverwenden?

Lösung:

Stellen Sie die Breite/Höhe der Überlagerung so ein, dass sie der Breite/Höhe des Dokuments entspricht, und binden Sie dann eine Funktion im Fenstergrößenänderungsereignis, um die Breite/Höhe der Überlagerung an die neue Breite/Höhe des Dokuments anzupassen:

$(document).ready(function(){
    var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

    $('.trigger').click(function(){
        $('div').slideDown();
        $('.ui-widget-overlay').fadeIn();
        setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change
    });

    $(window).resize(function(){
        setOverlayDimensionsToCurrentDocumentDimensions();
    });
});

function setOverlayDimensionsToCurrentDocumentDimensions() {
    $('.ui-widget-overlay').width($(document).width());
    $('.ui-widget-overlay').height($(document).height());
}

Beachten Sie, dass Sie die Größe der Überlagerung ändern müssen, wenn sich die Höhe des Dokuments ändert (Hinzufügen von Elementen, Animieren von Elementen, die nach unten gleiten usw.).

18
Andrew

Sie könnten so etwas tun:

<style type="text/css">
    * {border:0;margin:0}
.ui-widget-overlay {
    background: repeat-x scroll 50% 50% #AAA;
    opacity:0.3;
}

.ui-widget-overlay {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

</style>
<script type="text/javascript">

    $(function () {
        var $overlay = $('<div class="ui-overlay"><div class="ui-widget-overlay"></div></div>').hide().appendTo('body');
        $overlay.fadeIn();

        $(window).resize(function () {
            $overlay.width($(document).width());
            $overlay.height($(document).height());
        });
    });
</script>
9
fehays

Ab jQuery 1.4.4 sieht es so aus, als wäre es so einfach:

$.ui.dialog.overlay.create();

Update

Hier ist eine Geige .

Der obige Code gibt das HTML-Element zurück, daher sollte es folgendermaßen verwendet werden:

$("body").append($.ui.dialog.overlay.create());

Update 2

Wie gesagt, das funktioniert in jquery 1.10 nicht. Um dies zu beheben, habe ich eine eigene Überlagerung erstellt:

<div id="loading" style="display: none;">   
    <div class="loading-container">         
        <img src="/img/loading.gif"/>
    </div>                                  
</div>                                      

(Das Bild ist nur ein zufälliges Bild, das ich in der Mitte anzeigen wollte, um anzuzeigen, dass die Seite geladen wurde.) Dann fügte ich dieses CSS hinzu:

/* loading overlays */       
#loading {                   
    position: fixed;         
    top: 0;                  
    left: 0;                 
    width: 100%;             
    height: 100%;            
    background-color: #000;  
    filter:alpha(opacity=50);
    -moz-opacity:0.5;        
    -khtml-opacity: 0.5;     
    opacity: 0.5;            
    z-index: 10000;          
}                            
.loading-container {         
    position:fixed;          
    top: 50%;                
    left: 50%;               
}                            

Dann kann man $('#loading').show() und $('#loading').hide() aufrufen, um es auszublenden und zu entfernen.

Ich musste die Antwort hier optimieren: Stack Overflow Response

17
isaaclw

Dies ist eine alte Frage, aber ich bin darauf gestoßen und habe seitdem eine Lösung gefunden, die mir einfacher erscheint (getestet in Chrom/ie).

Die folgende CSS-Klasse, die in Verbindung mit dem Ui-Widget-Overlay von jquery ui verwendet wird, scheint den Trick zu erfüllen:

.modalOverlay {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 1001;
}

Passen Sie den Z-Index nach Bedarf an. Wenn Sie die feste Position und Breite/Höhe auf 100% setzen, müssen Sie die Größe der Überlagerung nicht ändern.

Beachten Sie, dass die Ui-Widget-Überlagerung die Position absolut überschreibt, wenn Sie dies zulassen.

Sehen Sie es in Aktion in diesem jsfiddle

4
LOAS

Es ist sehr einfach, zum Erstellen von Overlays diesen Code zu verwenden:

var overlay = new $.ui.dialog.overlay();

und wenn Sie es zerstören müssen, verwenden Sie diesen Code:

overlay.destroy();
2
Sabeeh Chaudhry

Hier ist ein Gedanke für Ihr CSS:

.ui-widget-overlay { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #444;

  /* add some opacity here */
} 
1
codeinthehole

Ich weiß, dass dies zu spät ist, um eine Antwort auf diese Frage zu geben, aber es ist einfacher, diese beiden Funktionen hinzuzufügen 

open: function() {
     $('.ui-widget-overlay').css('position', 'fixed');
      },
close: function() {
      $('.ui-widget-overlay').css('position', 'absolute');   
      } ,
1
Amol

dies funktioniert besser für seltsame Bildschirme oder mit Framesets:

var overlay = $('<div class="ui-overlay"  style="position: absolute; top: 0pt; left: 0pt; display: inline-block; overflow: hidden;"><div class="ui-widget-overlay" style="top: 0pt; left: 0pt; width: 9999px; height: 99999px;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();

check it out: http://jsfiddle.net/techunter/MdjBr/6/

0
TecHunter

Überprüfen Sie Folgendes: Var $ dial = $ (''); $ Dial.dialog ({modal: true}); $ ('. Ui-dialog'). verbergen();

0
Frederic