Fade in overlay dans le dialog modal

J’ai une boîte de dialog JQuery UI qui est modale et a un fond noir avec une opacité de 50%. Est-il possible de faire passer l’opacité du fond de 0% à 50%? Si c’est le cas, comment? Parce qu’à l’heure actuelle, c’est un peu comme si on frappait directement un visage lorsqu’un dialog est affiché.

FWIW, voici le CSS que j’utilise en ce moment:

.ui-widget-overlay { background: black; opacity: 0.5; filter: alpha(opacity = 50); position: absolute; top: 0; left: 0; } 

Vous pouvez utiliser la fonction jQuery fadeTo() . Plus d’informations peuvent être trouvées sur le lien ci-dessous. http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

Vous pouvez également append ceci à fadeIn dans le modal:

 $(loginForm).dialog({ resizable: false, open: function(){ $('.ui-widget-overlay').hide().fadeIn(); }, show: "fade", hide: "fade" }); 

J’espère que cela t’aides 🙂

C’est une extension de la réponse de Liam Potter. Son travail est excellent pour le fondu en entrée, mais ne gère pas le fondu en sortie. J’ai trouvé que c’était le moyen le plus simple de faire disparaître l’arrière-plan:

 beforeClose: function(){ $('.ui-widget-overlay:first') .clone() .appendTo('body') .show() .fadeOut(400, function(){ $(this).remove(); }) ; } 

Vous ne pouvez pas faire cela dans la méthode “close” car jQuery a déjà supprimé le conteneur ‘.ui-widget-overlay’. Cependant, en le clonant pour ne faire que le fondu, vous pouvez éviter leur suppression tout en utilisant tous les parameters par défaut. modes.

Je sais que cette question est ancienne, mais je l’ai trouvée tout à l’heure dans une recherche et j’ai le sentiment que je pourrais aider d’autres personnes.

Cela pourrait être amélioré, j’en suis sûr, mais les fondus apparaîtront en fondu lorsque vous utiliserez une boîte de dialog jQuery UI.

 open: function(){ $('.ui-widget-overlay').hide().fadeIn(); }, beforeClose: function(){ $('.ui-widget-overlay').remove(); $("
", { 'class':'ui-widget-overlay' }).css( { height: $("body").outerHeight(), width: $("body").outerWidth(), zIndex: 1001 } ).appendTo("body").fadeOut(function(){ $(this).remove(); }); }

Juste une amélioration mineure de la réponse de Liam Potter. Si vous voulez que la superposition soit en plein écran, vous pouvez changer son code pour utiliser $(document).height() et $(document).width() au lieu du corps, car celui-ci sera mesuré plus petit que le visible. surface.

 open: function(){ $('.ui-widget-overlay').hide().fadeIn(); }, beforeClose: function(){ $('.ui-widget-overlay').remove(); $("
", { 'class':'ui-widget-overlay' }).css({ height: $(document).height(), width: $(document).width(), zIndex: 1001 }).appendTo("body").fadeOut(function(){ $(this).remove(); }); }

Vous pouvez créer votre propre widget étendant $ .ui.dialog pour append un affichage en superposition et masquer des animations avec une configuration précise à l’aide de l’option.

Une autre fonctionnalité manquante pour fermer le dialog en cliquant sur la superposition est également facilement ajoutée:

dans un fichier, dites jquery-ui.fsrc.dialog.js:

 (function( $, undefined ) { $.widget('fsrc.fsrc_dialog', $.ui.dialog, { open: function() { // some helpful vars var self = this, options = self.options; // call parent method - it will create overlay and save it in self.overlay variable var ret = $.ui.dialog.prototype.open.apply(this, arguments); if (options.showOverlay) { // immediately hide and animate overlay // kind a hack, but jquery ui developers left no better way self.overlay.$el.hide().show(options.showOverlay) } if (options.closeOnOverlay) { // close dialog on click on overlay self.overlay.$el.click(function() { self.close(); }) } return ret; }, close: function(event) { var self = this, options = self.options; if (options.hideOverlay) { // save and unset self.overlay, so it will not be destroyed by parent function during animation var overlay = self.overlay self.overlay = null; overlay.$el.hide(options.hideOverlay, function() { // destroy overlay after animation as parent would do overlay.destroy(); }) } // call parent method var ret = $.ui.dialog.prototype.close.apply(this, arguments); return ret; } }); }(jQuery)); 

En page:

  ` 

J’ai nommé un espace de noms, un widget et des options en ma faveur.

Testé jquery1.7.2, jquery-ui1.8.19, IE9, ff11, chrome18.0.1025.168m, opera11.61

 $('.ui-widget-overlay').hide().fadeIn(); 

Cet effet a un problème sur IE car l’opacité ne fonctionnera pas après l’ouverture en fondu.

J’ai dû modifier la réponse de Sam Barnes pour que cela fonctionne (j’ai également lancé la fonction de clic de dialog dans une fonction $ (document) .ready):

   
Some Message!

Vous pouvez append ce qui se cache lorsque vous appuyez sur le bouton d’échappement en ajoutant:

 $(document).keyup(function(e) { if (e.keyCode == 27) { $(".ui-dialog").hide(); $('.ui-widget-overlay').hide(); } });