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, tout simplement, un divqui reste fixe sur l'écran (peu importe si vous faites défiler) et a une sorte d'opacité.

Ce sera votre CSS pour une 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 nécessaire). Vous allez simplement 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('<div id="overlay"> </div>');
overlay.appendTo(document.body)

Pour des raisons de performances, vous voudrez peut-être que le DIV soit masqué et que l'affichage soit bloqué et aucun si vous en avez besoin ou non.

J'espère que ça aide!

Edit: Comme @Vitaly l'a si bien dit, assurez-vous de vérifier votre DocType. En savoir plus sur les commentaires sur ses découvertes.

Voici une simple solution javascript uniquement

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").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

<img id="my-photo-id" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" alt="Photo" data-photo-overlay="true" />

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 = $("<div id='photoOverlay'></div>");
    var _photoOverlayShareButton = $("<div id='photoOverlayShare'>Share</div>");

    // 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 également utiliser un plugin de superposition léger. D'autres personnes en ont déjà écrit de belles dans jquery, alors pourquoi réinventer la roue?

Veuillez vérifier ce plugin jQuery,

blockUI

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

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

Bloquer la page: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); J'espère que cela aidera quelqu'un

Salutations

Par superposition, voulez-vous dire un contenu qui chevauche / couvre le reste 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é dynamiquement, 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, disons, une simple boîte chevauchant du contenu, utilisez simplement le positionnement absolu avec CSS. Si c'est dynamique (je crois que cela s'appelle une lightbox), vous pouvez écrire du code jQuery modifiant CSS pour afficher / masquer la superposition à la demande.