Skrypt z wysuwanym komunikatem z góry strony – notyfikacja na stronie internetowej

CSS Html JavaScript Webmastering informacja, notyfikacja, pasek z komunikatem, popup, skrypt, wiadomość admin 13 marca 2025 0 Komentarze

Skrypt z wysuwanym komunikatem z góry strony – notyfikacja na stronie internetowej

W prosty sposób można dodać taką funkcjonalność. Nie będzie dodatkowo konieczna żadna biblioteka Javascript 😉

Na początek dodaj zaraz po znaczniku <BODY> kod z treścią komunikatu:

  <div id="notification-bar">
    <span>To jest powiadomienie! Kliknij tutaj, aby zamknąć.</span>
    <button id="close-btn">X</button>
  </div>

  <div class="content">
    <h1>Witaj na stronie!</h1>
    <p>Przewiń w dół, aby zobaczyć resztę treści.</p>
  </div>

1

2

3

4

5

6

7

8

9

<span>To jest powiadomienie! Kliknij tutaj, aby zamknąć.</span>

</div>

<h1>Witaj na stronie!</h1>

<p>Przewiń w dół, aby zobaczyć resztę treści.</p>

</div>

Pod nim jest treść strony. Najlepiej aby miała klasę CSS o nazwie content. Pozwoli to na ustawienie odp. marginesu.

Do kodu CSS strony dopisz następujące klasy:

/* Ogólne style strony */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style dla paska powiadomienia */
#notification-bar {
  position: fixed;
  top: -50px; /* Ukryty na początku */
  left: 0;
  right: 0;
  background-color: #ff9800;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: top 0.3s ease;
}

#notification-bar span {
  flex-grow: 1;
}

#close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
}

/* Wyświetlenie paska powiadomienia */
#notification-bar.show {
  top: 0;
}

/* Responsywność */
@media (max-width: 600px) {
  #notification-bar {
    font-size: 14px;
    padding: 8px 15px;
  }

  #close-btn {
    font-size: 18px;
  }
}

.content {
  padding: 20px;
  margin-top: 70px; /* Przesunięcie w dół, aby treść nie była zasłonięta przez pasek */
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

/* Ogólne style strony */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* Style dla paska powiadomienia */

#notification-bar {

position: fixed;

top: -50px; /* Ukryty na początku */

left: 0;

right: 0;

background-color: #ff9800;

color: white;

padding: 10px 20px;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

transition: top 0.3s ease;

}

#notification-bar span {

flex-grow: 1;

}

#close-btn {

background: none;

border: none;

color: white;

font-size: 20px;

cursor: pointer;

padding: 5px;

}

/* Wyświetlenie paska powiadomienia */

#notification-bar.show {

top: 0;

}

/* Responsywność */

@media (max-width: 600px) {

#notification-bar {

font-size: 14px;

padding: 8px 15px;

}

#close-btn {

font-size: 18px;

}

.content {

padding: 20px;

margin-top: 70px; /* Przesunięcie w dół, aby treść nie była zasłonięta przez pasek */

}

Czas na kod JS. Dopisz go do pliku, gdzie znajdują się skrypty:

// Funkcja do wyświetlania paska powiadomienia
window.onload = () => {
  setTimeout(() => {
    document.getElementById('notification-bar').classList.add('show');
  }, 500); // Pasek pojawi się po 0.5 sekundy od załadowania strony
};

// Funkcja do zamknięcia paska powiadomienia
document.getElementById('close-btn').addEventListener('click', () => {
  document.getElementById('notification-bar').classList.remove('show');
});

1

2

3

4

5

6

7

8

9

10

11

// Funkcja do wyświetlania paska powiadomienia