Okienko blokujące fragment strony

Question

Witam, chciałbym się dowiedzieć w jaki sposób, zrobić taki efekt, żeby część strony np. jeden div był przyciemniony i treść w nim zablokowana. Wyświetlałoby się po środku przyciemnienia okienko po zamknięciu którego efekt by znikał. Zastanawia mnie najbardziej w jaki sposób można uzyskać taki efekt tylko dla części strony(jednego diva i innych w nim zawartych), bo jeśli chodzi o całość strony, to jest wiele poradników w internecie, ale do czegoś takiego nie znalazłem ani jednego.

Pozdrawiam, Else.

Answer 1

Coś takiego?

http://codepen.io/ChrissP92/pen/KzJXRa

Opis:

Tworzysz sobie element (może być DIV albo konkretny tag z HTML5), którego pozycjonujesz np. na środku elementu (za pomocą position: absolute;), który ma przykryć. Nadajesz mu klasę o nazwie np. dim:

.element.dim
{
  background: grey;
  opacity: 0.4;   // zwiekszasz przezroczystosc
  pointer-events: none; // wylaczasz eventy dla myszki
}

Dodajesz w JS EventListener'y, w które po kliknięciu przycisków, dodają i usuwają odpowiedni klasy CSS.

Elementowi, który nakładasz możesz też dodać klasę o nazwie np. hide i tam ustawić display: none;, aby po kliknięciu zniknął.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

https://css-tricks.com/almanac/properties/p/pointer-events/

Comments

dokładnie to, dzięki. Mam takie putanie. Dałoby się, żeby nie można było kopiować teksty spod spodu

---

Tak. Dopisz w .element.dim "user-select: none;"

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

 

---

Dzięki działa, ale dopiero po wklejeniu wszystkiego tj.

    user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;

Mam takie pytanko. Czy każda z tych linijek jest dla innej przeglądarki?

---

Tak, każda z tych linijek to tzw. prefix służący temu, aby dana przeglądarka mająca problem z tą funkcjonalnością mogła to obsłużyć.

Dlatego warto przed zastosowaniem czegoś w CSS sprawdzić, w jakim stopniu jest to obsługiwane przez przeglądarkę:

http://caniuse.com/#search=user-select