A msg box before opening the site

Question

Good was wondering how to start doing that that appears in the img if there’s any way someone can provide a code base or something that helps me to do this I’ll be very grateful.

Answer 1

You can create these box box warning with 2 divs: one that will be the transparent dark background that will occupy the whole screen and another that will be the box with the warning, centered horizontally and vertically with display: flex.

I also created a function that will close the box box, which can be via pure Javascript or jQuery (all this is adaptable the way you want it).

Here’s an example you can adapt to your needs:

function fechaAviso(){
   document.querySelector("#tela").style.display = "none";
   // jquery abaixo
   //$("#tela").hide();
}

#tela {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
}

#aviso{
   width: 300px;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   z-index: 999;
   top: 50%;
   align-self: center;
}

#aviso h2{
   margin: 0;
}

<p>Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto</p>
<div id="tela">
   <div id="aviso">
      <h2>BOX DE AVISO</h2>
      <p>Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto</p>
      <input type="button" value="Fechar" onclick="fechaAviso()" />
   </div>
</div>