Jaki jest najlepszy sposób na zrobienie diva na zasadzie alert()?

pytanie zadane 16 lipca 2021 w HTML i CSS przez Doge Gaduła (3,370 p.)

Witam, jaki jest najlepszy sposób na zrobienie diva, który będzie nad całym contentem strony? Chodzi mi o coś takiego, jak na przykład są reklamy na forum itp. Taki trochę alert, ale żeby można było włożyć tam funkcje, obrazki itd. Myślałem o

display: flex;

ale nie wiem w jaki sposób wyśrodkować div zagnieżdżony w kilku divach względem całej strony, więc byłbym wdzięczny, gdyby ktoś mógł mi to wytłumaczyć i powiedzieć, czy jest to dobry pomysł. A zagnieżdżony chyba musi być, ponieważ będzie tworzony dynamicznie(chyba że nie musi być i można go dać nad divami). Chodzi mi mniej więcej o coś takiego:

2 odpowiedzi

odpowiedź 16 lipca 2021 przez VBService Ekspert (253,340 p.)
wybrane 16 lipca 2021 przez Doge

Najlepsza

To jest tzw. modal box.

Przykład

<body>
  <div class="content">
    <p>Lorem ipsum</p>
    <div>Lorem2 ipsum</div>
    <input value="Lorem">
    <button id="open-alert-box">Otwórz alert</div>
  </div>



  <!-- może być na końcu kodu html -->
  <div class="modal-container">
    <div class="box">
      <div class="title-bar">
        <span class="title">Tytuł Lorem</span>
        <span class="close" title="Zamknij">&times;</span>
      </div>
      <div class="content">
        <!-- Twoja treść, inne div-y, span-y, img-e itp. -->
        <img src="https://forum.pasja-informatyki.pl/?qa=image&qa_blobid=14836961186631435352&qa_size=40" title="img lorem">
        <p>p Lorem w modal box</p>
        <div>div Lorem w modal box</div>
      </div>
    </div>
  </div>
  <script> 
    //... 
  </script>
</body>

input, button {
  display: block;
  margin: 2em 0;
  user-select: none;
}

.modal-container {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100vw;
  top: 0;
  left: 0;
  bottom: 0; /* height: 100% */
  z-index: 99; /* dla pewności wysoki numer */
  
  /* kolor tła pod modalem i jego przeźroczystość od 0.0 do 1.0 */
  /*   background-color: rgba(100,100,100,0.8); */
  background-image: radial-gradient(circle, rgba(0,0,0,0.9), rgba(100,100,100,0.6));
}
.modal-container .box {
  width: 350px;
  height: 250px;
  background-color: black;
  overflow: hidden;
  border: 1px solid white;
  box-shadow: 0 0 10px white;
}
.modal-container .title-bar {
  background-color: white;
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}
.modal-container .title-bar .title {
  font-size: 1em;
  color: blue;
  padding-left: 1em;
}
.modal-container .title-bar .close {
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  color: red;
  padding-right: 1em;
  user-select: none;
}
.modal-container .title-bar .close:active {
  transform: translatey(1px); /* efekt klik na span ;-) */
}

.modal-container .content {
  margin: 0;
  height: 100%;
  background-image: linear-gradient(black 80%, white);
}
.modal-container .content img {
  border: 2px solid white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 1em;
  margin: 1em;  
}
.modal-container .content p {
  color: limegreen;
}
.modal-container .content div {
  color: pink;
}

const button = document.querySelector('#open-alert-box');
button.addEventListener('click', () => {
  const modal_box = document.querySelector('.modal-container');
  modal_box.style.display = 'flex';
});

const modal_button_close = document.querySelector('.modal-container .close');
modal_button_close.addEventListener('click', () => {
  const modal_box = document.querySelector('.modal-container');
  modal_box.style.display = 'none';
});

[ HTML Symbols, Entities and ASCII Character Codes ]

1	komentarz 16 lipca 2021 przez Wiciorny Ekspert (270,110 p.) tak się zastanawiałem o co może chodzić z tym divem na zasadzie alerta :D, to zagadka za 100pkt.

komentarz 16 lipca 2021 przez Doge Gaduła (3,370 p.)

@.::VBService::.,

Dlaczego kiedy dam kod js do pliku script.js zamiast do znacznika <script> to button nie działa?

komentarz 16 lipca 2021 przez VBService Ekspert (253,340 p.)
edycja 16 lipca 2021 przez VBService

Zależy, w którym "miejscu" kodu html ładujesz plik js-a. Można temu zaradzić np. umieszczając kod js-a w onload strony wtedy ten kod uruchomi się po całkowitym rendering-u kodu html.

window.onload = () => {
  const button = document.querySelector('#open-alert-box');
  button.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'flex';
  });

  const modal_button_close = document.querySelector('.modal-container .close');
  modal_button_close.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'none';
  });
}

window.onload = function() {
  const button = document.querySelector('#open-alert-box');
  button.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'flex';
  });

  const modal_button_close = document.querySelector('.modal-container .close');
  modal_button_close.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'none';
  });
}

window.onload = onloadedPage;

function onloadedPage() {
  const button = document.querySelector('#open-alert-box');
  button.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'flex';
  });

  const modal_button_close = document.querySelector('.modal-container .close');
  modal_button_close.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'none';
  });
}

document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector('#open-alert-box');
  button.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'flex';
  });

  const modal_button_close = document.querySelector('.modal-container .close');
  modal_button_close.addEventListener('click', () => {
    const modal_box = document.querySelector('.modal-container');
    modal_box.style.display = 'none';
  });
});

komentarz 16 lipca 2021 przez Doge Gaduła (3,370 p.)

Podpiąłem go w <head>, ponieważ nie wiedziałem, że to ma znaczenie. Tym bardziej, że kod wywołuje się w addEventListener("click").

[edit]

A okej o taki onload chodzi, już rozumiem, ponieważ EventListener jest podpinany do elementu html, który musi się wygenerować.

komentarz 16 lipca 2021 przez VBService Ekspert (253,340 p.)
edycja 16 lipca 2021 przez VBService

Bo te 2 linie kodu uruchamiają się w sekcji head

. . .

const button = document.querySelector('#open-alert-box');

. . .
const modal_button_close = document.querySelector('.modal-container .close');

przez co powstaje błąd, bo button i modal_button_close są "puste", bo kod html modal-a jest na końcu strony, czyli elementy <button id="open-alert-box"> i <span class="close" title="Zamknij"> są "tworzone później" i document.querySelector ich "nieznajduje" i zwraca null.

const button = document.querySelector('#open-alert-box');
console.log(button);

const modal_button_close = document.querySelector('.modal-container .close');
console.log(modal_button_close);

odpowiedź 16 lipca 2021 przez adam_jankowski Mądrala (5,970 p.)
edycja 16 lipca 2021 przez adam_jankowski

Proponuję utworzyć div'a bezpośrednio w znaczniku body, a następnie dodać mu właściwość position: fixed; lub position: absolute; (w zależności czy chcesz by był sztywno ustawiony w danym miejscu na monitorze czy też można go było scrollować).

Wyśrodkowanie uzyskamy nadając mu odpowiednią szerokość i właściwości margin-left:auto; i margin-right: auto; Położeniem wertykalnym możemy sterować za pomocą właściwości top.

By uzyskać lepszy efekt w momencie pojawienia się tego div'a można całemu body nadać filter: brightness(70%);, a jemu filter: brightness(100%).

Mam nadzieję, że tego dotyczyło Twoje pytanie i, że pomogłem.