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

Wysuwany (banner,stopka) jako DIV po kliknięciu na link

VPS Starter Arubacloud
+1 głos
565 wizyt
pytanie zadane 18 września 2020 w HTML i CSS przez Wiciorny Ekspert (269,120 p.)

Hej mam pytanie, jako że w kwestii JS itp. raczkuje, tez nie wiem jak precyzyjnie zadać to pytanie.
Chodzi mi o to w jaki sposób stworzyć mogę coś na zasadzie dynamicznego baneru ( pojawiąjącego się na dole strony, jako zamykalny "DIV" ).
https://www.gov.pl/web/rodzina 
Tutaj takie coś się pojawia np na tej stronie "chodzi mi o taki dolny baner np o polityce cookie z możliwością zamykania" 
generalnie ja takiego diva mam tworzyć w momencie kliknięcia na link znajdujący się w stopce ma się on wysuwać, ale to wiem że należy podpiąc na akcje. Na razie jeśli ktoś byłby w stanie coś doradzić jak taki efekt zrobić- odesłać do fidla podobnego, dzieki 

Ps: to nie ma być modalne okno, tylko div na dole strony nie blokujący bo jeśli chodzi o modalne, to już takie mam 
to jest wycięty przykład co mam na myśli 

1 odpowiedź

0 głosów
odpowiedź 19 września 2020 przez VBService Ekspert (251,210 p.)
edycja 19 września 2020 przez VBService

Czy może pojawiać się dolny baner, w stylu FadeIn - FadeOut? Jeżeli tak, to oto Moja propozycja.

<style>
:root {
  --color-font: AliceBlue;
  --color-background: CornflowerBlue;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#cookies-info {
    position: fixed;
    display: block;
    left: 0;
    bottom: 0;
    opacity: 0;
    border-top: 2px solid gray;
    color: var(--color-font);
    background-color: var(--color-background);
    padding: 0.4em 0.5em;
    padding-right: 1.4em;
    z-index: 999;
    transition: opacity 1s;
}
#cookies-info .message {
    font: bold 1em/1em monospace;
}
#cookies-info #cookies-info-close {    
    position: absolute;
    cursor: pointer;
    border: none;
    outline: none;
    width: 1.3em;
    height: 1.3em;
    right: 0.4em;
    top: 0.6em;
}
#cookies-info #cookies-info-close svg {
  stroke: var(--color-font);
  stroke-width: 3;
} 
</style>
<body>
<p><a id="cookies-info-show" href="#">Link znajdujący się w stopce</a></p>
<div id="cookies-info">
  <span class="message">
    W celu świadczenia usług na najwyższym poziomie stosujemy pliki cookies. Korzystanie z naszej witryny oznacza, że będą one zamieszczane w Państwa urządzeniu. W każdym momencie można dokonać zmiany ustawień Państwa przeglądarki.
  </span>
  <span id="cookies-info-close">
      <svg id="icon_close" style="width: 0.9em" viewBox="0 0 18 18">
         <line x1="4" y1="4" x2="16" y2="16"></line>
         <line x1="16" y1="4" x2="4" y2="16"></line>       
      </svg>
  </span>
</div>

<script>
const cookies_info = document.getElementById("cookies-info");
const cookies_info_show = document.getElementById("cookies-info-show");
const cookies_info_close = document.getElementById("cookies-info-close");

cookies_info_show.addEventListener("click", () => {
  cookies_info.setAttribute("style", "opacity: 0.9;");
})
cookies_info_close.addEventListener("click", () => {
  cookies_info.setAttribute("style", "opacity: 0;");
})
</script>
</body>

CodePen

Podobne pytania

+1 głos
2 odpowiedzi 344 wizyt
pytanie zadane 5 sierpnia 2017 w HTML i CSS przez kamil29 Obywatel (1,230 p.)
0 głosów
0 odpowiedzi 119 wizyt
pytanie zadane 27 sierpnia 2020 w HTML i CSS przez Hansik Nowicjusz (170 p.)
–1 głos
2 odpowiedzi 376 wizyt
pytanie zadane 4 marca 2017 w HTML i CSS przez sprytny22 Obywatel (1,130 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 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!

...