Jak mogę stworzyć naprawdę podstawową nakładkę w jQuery bez interfejsu użytkownika?
Co to jest lekka wtyczka?
Nakładka to po prostu element, div
który pozostaje na ekranie (bez względu na to, czy przewijasz) i ma pewien rodzaj krycia.
To będzie Twój CSS dla krycia w różnych przeglądarkach 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;
}
To będzie Twój kod jQuery (nie jest potrzebny interfejs użytkownika). Po prostu utworzysz nowy element z nakładką # ID. Tworzenie i niszczenie DIV powinno wystarczyć.
var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)
Ze względu na wydajność możesz chcieć ukryć DIV i ustawić wyświetlanie na blokowanie i brak, tak jak tego potrzebujesz, lub nie.
Mam nadzieję, że to pomoże!
Edycja: Jak dobrze to ujął @Vitaly, sprawdź swój DocType. Przeczytaj więcej na temat komentarzy do jego ustaleń.
background-image: url('semi-transparent-pixel.png');
Oto proste rozwiązanie tylko 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(); }
Próbny:
http://jsfiddle.net/UziTech/9g0pko97/
Sens:
https://gist.github.com/UziTech/7edcaef02afa9734e8f2
źródło
<table>
? Czy to lata 90?Oto w pełni hermetyzowana wersja, która dodaje nakładkę (w tym przycisk udostępniania) do dowolnego elementu IMG, gdzie 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 + "]"); } } )();
źródło
Jeśli już używasz jquery, nie widzę powodu, dla którego nie miałbyś również używać lekkiej wtyczki nakładki. Inni ludzie już napisali kilka fajnych w jquery, więc po co wymyślać koło na nowo?
źródło
Proszę sprawdzić tę wtyczkę jQuery,
blockUI
dzięki temu możesz nałożyć całą stronę lub elementy, dla mnie działa świetnie,
Przykłady: blokowanie elementu div:
$('div.test').block({ message: null });
Zablokuj stronę:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
mam nadzieję, że komuś pomożePozdrowienia
źródło
Czy pod pojęciem nakładki rozumiecie treść, która nakłada się / zakrywa pozostałą część strony? W HTML można to zrobić, używając elementu div, który używa pozycjonowania bezwzględnego lub stałego. Gdyby trzeba było generować go dynamicznie, jQuery mógłby po prostu wygenerować element div z odpowiednio ustawionym stylem pozycji.
źródło
Co zamierzasz zrobić z nakładką? Jeśli jest statyczny, powiedzmy, proste pole zachodzące na jakąś treść, po prostu użyj pozycjonowania bezwzględnego w CSS. Jeśli jest dynamiczny (wydaje mi się, że nazywa się to lightbox), możesz napisać kod jQuery modyfikujący CSS, aby pokazać / ukryć nakładkę na żądanie.
źródło