superposicion - jQuery: ¿Cómo puedo crear una superposición simple?
superposición de pantalla samsung j7 (7)
¿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.
¿Cómo puedo crear una superposición realmente básica en jQuery sin UI?
¿Qué es un plugin liviano?
¿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.
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:
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 + "]");
}
}
)();
Por favor revisa este plugin jQuery,
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
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?
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 ..