• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

wyskakujący popup i zamknięcie go za pomocą ESC

VPS Starter Arubacloud
0 głosów
138 wizyt
pytanie zadane 20 marca 2019 w JavaScript przez Sobol3k Użytkownik (690 p.)

Witam Panowie mam taki problem zrobiłem sobie pewną apke w JS i chciałbym aby pewien div tzw. popup wyświetlał się po 5 sekundach gdy użytkownik wejdzie na stronie. Domyślne jest on ustawiony na display: none, a wszystkim sterować ma skrypt w javaScript dodatkowo chciałbym aby do elementu body w html dodawała się klasa która przyciemny cały dokument gdy wyświetli się popup. Niestety coś nie działa a sama konsola nie wyrzuca błędów, mógłby ktoś rzucić okiem i podpowiedzieć co mógłbym zrobić aby to zaczęło hulać. Druga funkcja służy do zamykania popupa po przez przycisk ESC.

document.addEventListener('DOMContentLoaded', () =>{
    
    const popup = document.querySelector('.popup');
    
    if(popup.style.display === "none"){
        
        setTimeout(function(){
            
            document.body.classList.add('opened-popup');
            popup.style.display = "block";
            
        }, 5000)
    }

    window.addEventListener('keyup', function(e){
        
        if(e.keyCode === 27){
            
            if(popup.style.display === "block"){
                
                popup.style.display === "none";
                document.body.classList.remove('opened-popup');
            }
            
        }
        
    }, false)
    
}, false)

 

1 odpowiedź

0 głosów
odpowiedź 20 marca 2019 przez pablop76 VIP (123,060 p.)

Nie mam jak teraz sprawdzić, ale wydaję mi się, że keyup nie działa dla window. Cel tego zdarzenia to document lub element

komentarz 20 marca 2019 przez Sobol3k Użytkownik (690 p.)
Jeśli chodzi o zdarzenie keyup to już to ogarnąłem zmieniłem z obiekt z window na document oraz miałem błąd tutaj: popup.style.display === "none"  - zamiast przypisać to dałem operator porównania. Jeśli ustawię na sztywno css display block i dodam klase do body to te zdarzenie działa. Lecz setTimeout do tej pory nie działa inaczej rzecz mówią działa jeśli użyję go bez warunku if(popup.style.display === "none") ktoś może powiedzieć czemu tak a nie inaczej to działa?
komentarz 20 marca 2019 przez pablop76 VIP (123,060 p.)
edycja 20 marca 2019 przez pablop76

Nie możesz w ten sposób sprawdzić stylu dla elementu ponieważ nie jest on inline. Rozwiązaniem jest sprawdzenie klasy lub pobranie stylu w css lub dodanie stylu inline.

komentarz 20 marca 2019 przez Sobol3k Użytkownik (690 p.)

Dziękuję za odpowiedź, a wiesz może czy 

window.getComputedStyle

da radę by pobrać style?

komentarz 20 marca 2019 przez pablop76 VIP (123,060 p.)

Tak da radę

getComputedStyle

komentarz 20 marca 2019 przez Sobol3k Użytkownik (690 p.)
Dziękuję za pomoc w takim razie :)
komentarz 20 marca 2019 przez pablop76 VIP (123,060 p.)
Proszę.

Podobne pytania

0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 10 lutego 2021 w JavaScript przez x_000 Obywatel (1,460 p.)
0 głosów
1 odpowiedź 112 wizyt
pytanie zadane 3 lutego 2020 w C i C++ przez mcwe8x Początkujący (460 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...