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

pytanie zadane 18 września 2020 w HTML i CSS przez Wiciorny Ekspert (283,300 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ź

odpowiedź 19 września 2020 przez VBService Ekspert (256,580 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