jQuery: Comment créer une superposition simple?

Comment puis-je créer une superposition vraiment basique dans jQuery sans interface utilisateur?

Qu’est-ce qu’un plugin léger?

Une superposition est simplement un div qui rest fixe sur l’écran (peu importe si vous faites défiler) et qui a une certaine opacité.

Ce sera votre CSS pour l’opacité entre navigateurs de 0.5:

 #overlay { 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; } 

Ce sera votre code jQuery (aucune interface utilisateur requirejse). Vous allez juste créer un nouvel élément avec l’ID #overlay. Créer et détruire le DIV devrait être tout ce dont vous avez besoin.

 var overlay = jQuery('
'); overlay.appendTo(document.body)

Pour des raisons de performances, vous pouvez souhaiter que la DIV soit masquée et que l’affichage soit bloqué et que vous n’en ayez pas besoin.

J’espère que cela aide!

Edit: Comme @Vitaly le dit si bien, assurez-vous de vérifier votre DocType. En savoir plus sur les commentaires sur ses conclusions.

Voici une solution simple javascript uniquement

 function displayOverlay(text) { $("
" + text + "
").css({ "position": "fixed", "top": 0, "left": 0, "width": "100%", "height": "100%", "background-color": "rgba(0,0,0,.5)", "z-index": 10000, "vertical-align": "middle", "text-align": "center", "color": "#fff", "font-size": "30px", "font-weight": "bold", "cursor": "wait" }).appendTo("body"); } function removeOverlay() { $("#overlay").remove(); }

Démo:

http: //jsfiddle.net/UziTech/9g0pko97/

Essentiel:

https://gist.github.com/UziTech/7edcaef02afa9734e8f2

Voici une version entièrement encapsulée qui ajoute une superposition (y compris un bouton de partage) à tout élément IMG où data-photo-overlay = ‘true.

JSFiddle http://jsfiddle.net/wloescher/7y6UX/19/

HTML

 Photo 

CSS

 #photoOverlay { background: #ccc; background: rgba(0, 0, 0, .5); display: none; height: 50px; left: 0; position: absolute; text-align: center; top: 0; width: 50px; z-index: 1000; } #photoOverlayShare { background: #fff; border: solid 3px #ccc; color: #ff6a00; cursor: pointer; display: inline-block; font-size: 14px; margin-left: auto; margin: 15px; padding: 5px; position: absolute; left: calc(100% - 100px); text-transform: uppercase; width: 50px; } 

JavaScript

 (function () { // Add photo overlay hover behavior to selected images $("img[data-photo-overlay='true']").mouseenter(showPhotoOverlay); // Create photo overlay elements var _isPhotoOverlayDisplayed = false; var _photoId; var _photoOverlay = $("
"); var _photoOverlayShareButton = $("
Share
"); // Add photo overlay events _photoOverlay.mouseleave(hidePhotoOverlay); _photoOverlayShareButton.click(sharePhoto); // Add photo overlay elements to document _photoOverlay.append(_photoOverlayShareButton); _photoOverlay.appendTo(document.body); // Show photo overlay function showPhotoOverlay(e) { // Get sender var sender = $(e.target || e.srcElement); // Check to see if overlay is already displayed if (!_isPhotoOverlayDisplayed) { // Set overlay properties based on sender _photoOverlay.width(sender.width()); _photoOverlay.height(sender.height()); // Position overlay on top of photo if (sender[0].x) { _photoOverlay.css("left", sender[0].x + "px"); _photoOverlay.css("top", sender[0].y) + "px"; } else { // Handle IE incompatibility _photoOverlay.css("left", sender.offset().left); _photoOverlay.css("top", sender.offset().top); } // Get photo Id _photoId = sender.attr("id"); // Show overlay _photoOverlay.animate({ opacity: "toggle" }); _isPhotoOverlayDisplayed = true; } } // Hide photo overlay function hidePhotoOverlay(e) { if (_isPhotoOverlayDisplayed) { _photoOverlay.animate({ opacity: "toggle" }); _isPhotoOverlayDisplayed = false; } } // Share photo function sharePhoto() { alert("TODO: Share photo. [PhotoId = " + _photoId + "]"); } } )();

Si vous utilisez déjà jquery, je ne vois pas pourquoi vous ne pourriez pas utiliser un plug-in de superposition léger. D’autres personnes ont déjà écrit de jolies versions en jquery, alors pourquoi réinventer la roue?

Par superposition, entendez-vous un contenu qui se superpose / recouvre le rest de la page? En HTML, vous pouvez le faire en utilisant un div qui utilise un positionnement absolu ou fixe. S’il devait être généré dynamicment, jQuery pourrait simplement générer un div avec le style de position défini de manière appropriée.

Que comptez-vous faire avec la superposition? Si c’est statique, par exemple une simple boîte chevauchant du contenu, utilisez simplement le positionnement absolu avec CSS. S’il est dynamic (je crois que cela s’appelle une lightbox), vous pouvez écrire du code jQuery modifiant CSS pour afficher / masquer la superposition à la demande.

S’il vous plaît vérifier ce plugin jQuery,

blockUI

avec cela, vous pouvez superposer toute la page ou les éléments, fonctionne très bien pour moi,

Exemples: Bloquer un div: $('div.test').block({ message: null });

Bloquer la page: $.blockUI({ message: '

Just a moment...

' }); J’espère que ça aide quelqu’un

Salutations