A box with msg before opening the site [closed]

Question

A box with msg before opening the site [closed]

Navigation

#1 by (1 votes)

-2

Well I was wondering how to start doing this that appears in img if you have someone like to provide a code base or something that helps me do this I'll be most grateful.

php html css

asked by anonymous 25.12.2017 / 05:33

1 answer

How to recover tables from MySQL database with corrupted operating system? Java Language - Undo and Redo Functions

score 1 · Accepted Answer

You can create these warning with 2 divs : one that will be the transparent dark background that will occupy the entire 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 , which can be via pure JavaScript or jQuery (all of which is adaptable any way you want).

Here's an example that you can adapt to suit 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>