Blur i pojawianie się

Question

Witam, chciałbym zrobić tak, że po naciśnięciu tego buttona sekcja order pojawiała by się na samym środku nie ważne gdzie był by ktoś na stronie i żeby ta sekcja blurowała całe tło które ma za sobą czy ktoś wie jak to zrobić?

kod: https://codepen.io/AgentTecza/pen/OJRpPVW

Answer 1

Hej, tak żeby nic nie zmieniać w Twoim kodzie to proponuję tylko w CSS dopisać dwie klasy:

.orderAfterClick {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.articleAfterClick {
filter: blur(4px);
}

a w js na przykład:

const setOrder = () => {
document.getElementById('order').classList.add('orderAfterClick');
document.querySelector('article').classList.add('articleAfterClick');
};

document.getElementById('button').addEventListener('click', setOrder);

 

Comments

A co jak chce zrobić żeby na początku go nie było widać i dopiero po kliknięciu bo męczę się od wczoraj żeby wykombinować coś z opacity ale nic mi nie wychodzi możesz jakoś pomóc?

---

Hmm to może na przykład już w html dodaj tej sekcji klasę "hidden":

<section id="order" class="hidden"></section>

dodaj tę klasę w css, a w niej display: none:

.hidden {
  display: none;
}

po kliknięciu, przez js nada się klasę 'orderAfterClick', a usunie klasę 'hidden'.

const setOrder = () => {
  const order = document.getElementById('order');
order.classList.add('orderAfterClick');
order.classList.remove('hidden');
document.querySelector('article').classList.add('articleAfterClick');
};
 
document.getElementById('button').addEventListener('click', setOrder);

 

Tylko pamiętaj, żeby usunąć 'opacity: 0' dla selektora #order. Zresztą wtedy nie byłby nawet potrzebny ten selektor w css, a jego właściwości można od razu przenieść do klasy 'orderAfterClick'.

 

Answer 2

https://codepen.io/Tnifey/pen/JjGaqeQ

Zamiast position relative daj position fixed