superposicion - jQuery: ¿Cómo puedo crear una superposición simple?

superposición de pantalla samsung j7

Question

¿Cómo puedo crear una superposición realmente básica en jQuery sin UI?

¿Qué es un plugin liviano?

Answer 1

¿Por superposición quiere decir contenido que se superpone / cubre el resto de la página? En HTML, puedes hacer esto usando un div que usa posicionamiento absoluto o fijo. Si necesita ser generado dinámicamente, jQuery podría simplemente generar un div con el estilo de posición establecido apropiadamente.

Answer 2

¿Qué piensas hacer con la superposición? Si es estático, por ejemplo, un cuadro simple que se superpone a algún contenido, solo use el posicionamiento absoluto con CSS. Si es dinámico (creo que esto se llama una caja de luz), puede escribir algún código jQuery que modifique CSS para mostrar / ocultar la superposición a pedido.

Answer 3

Aquí hay una solución simple de javascript

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

Manifestación:

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

Esencia:

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

Answer 4

Aquí hay una versión completamente encapsulada que agrega una superposición (incluido un botón para compartir) a cualquier elemento IMG donde 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 + "]");
        }
    }
)();

Answer 5

Por favor revisa este plugin jQuery,

blockUI

con esto puedes superponer todas las páginas o elementos, funciona muy bien para mí,

Ejemplos: Bloquea un bloque div: $(''div.test'').block({ message: null });

Bloquee la página: $.blockUI({ message: ''<h1><img src="busy.gif" /> Just a moment...</h1>'' }); Espero que ayudes a alguien

Saludos

Answer 6

Si ya está usando jquery, no veo por qué no podría usar un complemento de superposición ligera. Otras personas ya han escrito algunas bonitas en jquery, entonces, ¿por qué reinventar la rueda?

Answer 7

Una superposición es, simplemente, un div que permanece fijo en la pantalla (no importa si se desplaza) y tiene algún tipo de opacidad.

Este será su CSS para opacidad de navegador cruzado 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;
}

Este será su código jQuery (no se necesita IU). Simplemente va a crear un nuevo elemento con ID #overlay. Crear y destruir el DIV debería ser todo lo que necesita.

var overlay = jQuery(''<div id="overlay"> </div>'');
overlay.appendTo(document.body)

Por motivos de rendimiento, es posible que desee ocultar el DIV y configurar la pantalla para bloquear y ninguna como la necesite o no.

¡Espero eso ayude!

Editar: Como @Vitaly, así que bien, asegúrate de revisar tu DocType. Lea más sobre los comentarios sobre sus hallazgos ..