web-dev-qa-db-fra.com

jQuery UI: Comment utiliser ui-widget-overlay par lui-même?

J'essaie de créer une superposition similaire à celle utilisée par jQuery UI Dialog. Je peux créer la superposition comme ceci:

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

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

Mais la superposition se coupe lorsque je fais défiler vers le bas. J'ai remarqué que l'interface utilisateur jQuery définit la largeur et la hauteur de cette div de manière dynamique. Je souhaite donc réutiliser cette fonctionnalité au lieu de réinventer la roue. Comment puis-je créer une superposition comme celle-ci ou réutiliser celle-ci dans l'interface utilisateur jQuery?

Solution:

Définissez la largeur/hauteur de la superposition sur la largeur/hauteur du document, puis liez une fonction sur l'événement redimensionner la fenêtre pour ajuster la largeur/hauteur de la superposition à la nouvelle largeur/hauteur du document:

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

Notez que chaque fois que la hauteur du document change (ajout d'éléments, animation d'éléments qui glissent vers le bas, etc.), vous devrez redimensionner la superposition.

jqueryjquery-uijquery-ui-dialog
18
Andrew

Vous pouvez faire quelque chose comme ça:

<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

Depuis jQuery 1.4.4, il semble que ce soit aussi simple que:

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

Mise à jour

Voici un violon .

Le code ci-dessus renvoie l'élément HTML, il devrait donc être utilisé comme ceci:

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

Mise à jour 2

Comme cela a été dit, cela ne fonctionne pas dans jQuery 1.10. Pour résoudre ce problème, j'ai créé ma propre superposition:

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

(l'image est juste une image aléatoire que je voulais afficher au milieu pour indiquer que la page était en train de se charger) Puis j'ai ajouté ce CSS:

/* 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%;               
}

Ensuite, on peut appeler $('#loading').show() et $('#loading').hide() pour le masquer et le supprimer.

Je devais Tweak la réponse ici: réponse de débordement de pile

17
isaaclw

C’est une vieille question, mais j’ai trébuché dessus et j’ai depuis lors proposé une solution qui me semble plus simple (testée en chrome/ie).

La classe css suivante utilisée conjointement avec l'interface de recouvrement ui-widget-de jquery ui semble faire l'affaire:

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

Tweak le z-index si nécessaire. En utilisant position fixe et largeur/hauteur définies à 100%, vous n'avez pas à redimensionner la superposition.

Notez que ui-widget-overlay remplacera position en absolu, si vous le laissez.

Voyez-le en action dans ce jsfiddle

4
LOAS

C'est très simple, pour créer une superposition, utilisez simplement ce code:

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

et quand vous devez le détruire utilisez ce code:

overlay.destroy();
2
Sabeeh Chaudhry

Voici une pensée pour votre CSS:

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

  background-color: #444;

  /* add some opacity here */
}
1
codeinthehole

Je sais que c'est trop tard pour répondre à cette question, mais une façon plus simple d'ajouter ces deux fonctions 

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

cela fonctionnera mieux pour les écrans étranges ou avec des cadres:

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

vérifier: http://jsfiddle.net/techunter/MdjBr/6/

0
TecHunter

Vérifiez que: Var $ dial = $ (''); $ Dial.dialog ({modal: true}); $ ('. Ui-dialog'). cacher();

0
Frederic