Efekt przyciemniania strony po kliknięciu buttona

Question

Witam, Tworzę stronę internetową i chciałem zastosować pewien efekt lecz nie wiem jak go osiągnąć,

A mianowicie chciał bym aby po kliknięciu buttona (Którego juz mam na stronie) Cała strona sie zaciemniła a na środku strony pojawiły się kolejne 2 buttony, Jak osiągnąć taki efekt ??

Comments

I chce jeszcze dodać że mam już zrobione buttony, więc chciał bym to po prostu "Podpiąć" pod ten button

Answer 1

Jeśli nie znasz JS'a to jedyną opcją jest CSS:

Najpierw w kodzie html bezpośrednio po buttonie musisz dodać np. div'a, a w nim umieszczasz to co chcesz, żeby się znajdowało na tym przyciemnionym tle (te dwa przyciski o których mówisz). Ten div będzie zajmował całą szerokość i wysokość strony, a jego tło będzie lekko przezroczyste dzięki czemu uzyskamy pożądany efekt:

div {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  display: none;
  background-color: rgba(48,48,48,0.5);
}

1 i 2 linijka: ustawiamy wysokość i szerokość na 100% obszaru roboczego... 3 i 4: pozycjonujemy div'a względem krawędzi okna - na 0. 5: z-index ustawiony na 100 sprawi, że nasz div na pewno będzie na samym wierzchu (no chyba, że jakiemuś innemu elementowi ustawimy wyższy). 6: display na none, bo będziemy chcieli go wyświetlić po kliknięciu w przycisk, ale to zaraz. 7: kolor tła to "taki szary" z połową przezroczystości (może się przydać).

 

Teraz łapiemy kliknięcie przycisku i korzystając z selektora + (tak wiem: w3schools) ustawiamy display div'a na block:

button.klasa_przycisku:focus + div.klasa_diva {
  display: block;
}

Ciekawe co? Tym selektorem stylujemy div'a leżącego obok przycisku, ale tylko w momencie w którym jest kliknięty.

 

Dodatkowo możesz dodać animację wartości opacity (znowu XD) z 0 do 1, co sprawi, że ten div się jakby wynurzy, chociaż w przypadku opacity to samo można zrobić za pomocą transition (ahhh).

Answer 2

https://codepen.io/radek024/pen/EWPXrg

Możesz pobadać ten kod - po kliknięciu tło się przyciemnia, dodanie przycisków to kwestia napisania klasy oraz małego kodu w JSie.

Comments

Niestety nie miałem nigdy do czynienia z js :/

---

Jeżeli chcesz tworzyć takie rzeczy to najwyższa pora :)

---

A co do tego linku co podałeś nic nie czaję XD Co mam robić ?

---

Jedyne co musisz zrobić to złapać elementy które chcesz i operować na ich widoczności. Przyciemnienie strony może stanowić warstwa rozciągnięta na całą wysokość i szerokość ekranu, o kolorze czarnym z kanałem alfa ustawionym na 50-90%. Czyli de facto coś w ten deseń:

.overlay {
  background-color: rgba(0, 0, 0, .75);
}