Come posso creare un overlay di base in jQuery senza UI?jQuery: Come posso creare un semplice overlay?
Che cos'è un plug-in leggero?
Come posso creare un overlay di base in jQuery senza UI?jQuery: Come posso creare un semplice overlay?
Che cos'è un plug-in leggero?
Un overlay è, semplicemente, uno fissato sullo schermo(indipendentemente dal fatto che si scorre) e presenta una sorta di opacità.
Questo sarà il vostro CSS per il cross opacità del browser di 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;
}
Questo sarà il tuo codice jQuery (senza interfaccia utente necessario). Stai per creare un nuovo elemento con l'ID #overlay. Creare e distruggere il DIV dovrebbe essere tutto ciò che serve.
var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)
Per motivi di prestazioni si potrebbe desiderare di avere il DIV nascosto e impostando il display per bloccare e nessuno di cui hai bisogno o no.
Spero che aiuti!
Modifica: Come @Vitaly così bene, assicurati di controllare il tuo DocType. Leggi di più sui commenti sui suoi risultati ..
Questo non funziona in IE8. La "sovrapposizione" è mostrata sotto il contenuto. Qualche idea su come risolvere questo problema? – Vitaly
@Vitaly stai mettendo l'overlay DIV in cima alla pagina? con 'posizione: fissa; top: 0; a sinistra: 0 'se è così fammelo sapere e gli darò un'occhiata quando arrivo in ufficio. – Frankie
Sì, proprio come te. Impostare la posizione su "absolute" lo fa funzionare, ma non copre il lato destro del documento e scorre con il resto del contenuto. – Vitaly
Se si sta già utilizzando jquery, non vedo perché non si possa utilizzare un plug-in di sovrapposizione leggero. Altre persone ne hanno già scritte alcune belle in jQuery, quindi perché reinventare la ruota?
quale plug-in di overlay leggero è lì? – aoghq
Perché prendere in prestito una ruota con campane e fischietti quando puoi creare una ruota perfettamente accettabile in 3 righe di codice? I plugin non sono sempre la soluzione migliore. – Joel
3 righe di codice che potrebbero funzionare bene in FF, ma in alcune versioni di IE potrebbero esserci stranezze. Almeno con uno strumento conosciuto, la maggior parte dei nodi sono già stati risolti. –
Per overlay intendi contenuto che si sovrappone/copre il resto della pagina? In HTML, puoi farlo usando un div che usa il posizionamento assoluto o fisso. Se dovesse essere generato dinamicamente, jQuery potrebbe semplicemente generare un div con lo stile di posizione impostato in modo appropriato.
Che cosa intendi fare con l'overlay? Se è statico, diciamo, una semplice scatola che si sovrappone a qualche contenuto, usa semplicemente il posizionamento assoluto con i CSS. Se è dinamico (credo che si chiami lightbox), puoi scrivere del codice jQuery di modifica CSS per mostrare/nascondere l'overlay su richiesta.
Ecco una versione completamente incapsulata che aggiunge una sovrapposizione (incluso un pulsante di condivisione) a qualsiasi elemento IMG in cui 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 + "]");
}
}
)();
Ecco un semplice javascript unica soluzione
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();
}
Demo:
http://jsfiddle.net/UziTech/9g0pko97/
Gist:
copia & incolla e funziona. lo adoro, grazie! – Chris
A '
per l'opzione più semplice consulta questo link http://yuku-t.com/jquery-overlay/ – chaitanya