MODAL LEGAL, MAS LINKS ABAIXO DELE AINDA ACESSÍVEIS

Opa Alexandre, disponibiliza seu código do modal pra gente pensar numa solução?

Olá, Macedo. É sobre este exercício

Fiz add da div abaixo , como sendo o primeiro elemento do body do site da caelum, como se diz no exercício.

<div style="
    width: 25%;
    background-color: #FFF;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.75);
    padding: 5%;
    text-align: center;
    /* font-size: 2em; */
    height: 30%;
">
Parabéns!!! Você foi premiado com uma formação Java. 
    Clique <a style="    text-decoration: underline;
    color: blue;
          " href="">aqui</a> para receber.

</div>

Opa Alexandre, mas esse popup não cobre toda a página pelo que vejo no código. Assim, alguns links realmente serão acessíveis.

Pro que você pretende fazer, precisaria que ele ocupasse toda a página, ou seja, width e height com 100%, entende?

Opa, Macedo. Então, esse é o ponto ... o popup não ocupa toda página e simula um modal... Nos modais que vejo, como por exemplo esse aqui, ou este aqui, o popup não ocupa toda tela e os links da tela, abaixo do popup, ficam desabiliitados :)

Olá Alexandre, para isso é preciso uma DIV "backdrop" por trás do seu modal (popup). Veja um exemplo simples:

<div>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita neque laboriosam maxime nam ratione architecto voluptatibus, illo quis necessitatibus rem! Ullam veniam voluptatum et reprehenderit voluptatibus totam quibusdam reiciendis commodi.
  </div>

  <div class="backdrop">
      <div class="modal">
          meu conteudo
      </div>
  </div>>

<style>

    .backdrop{
        width: 100%;
        height: 100vh; /* ou 100% */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);

        /* abaixo, alinhamento ao centro com flexbox com os prefixos dos navegadores. */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .modal{
        width: 300px;
        background: #fff;
        padding: 20px 15px;
        border-radius: 5px;
    }

</style>

Espero que te ajude, abraço.

Entendo Alexandre, mas o conceito de popup não diz que ele ocupa toda a página ou desabilita links. Esses são mais comuns e é verdade mesmo, porém, são assim por questões mais estéticas.

Popup na verdade era uma coisa bem antiquada, por que "antigamente" era abrir uma outra janela no navegador (e ainda acontece hoje em dia). Esses truques a gente veio criando/melhorando com o tempo.

Olá, obrigado Macedo e Fernando, pela atenção.Macedo, creio que não fui tão claro em formular o problema. O ponto é que Fernando mostrou um código que produz o que eu estava querendo : a div backdrop desabilita todos o links que estão abaixo dela... era esse o efeito que eu procurava. Testei o código dele colocando um link abaixo da backdrop e ele não é clicável :

<div>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita neque laboriosam maxime nam ratione architecto voluptatibus, illo quis necessitatibus rem! Ullam veniam voluptatum et reprehenderit voluptatibus totam quibusdam reiciendis commodi.
    <a href="https://www.google.com.br">google</a>
  </div>

  <div class="backdrop">
      <div class="modal">
          meu conteudo
           <a href="https://www.google.com.br">google</a>
  </div>
      </div>
  </div>

<style>

    .backdrop{
        width: 100%;
        height: 100vh; /* ou 100% */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);

        /* abaixo, alinhamento ao centro com flexbox com os prefixos dos navegadores. */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal{

        width: 300px;
        background: #fff;
        padding: 20px 15px;
        border-radius: 5px;
    }

</style>

Grato pela atenção :-)

Boa noite, no começo eu tive essas dúvidas também, é normal. Tente inspecionar os exemplos do Bootstrap, Materialize e outros para ver como funciona, pode te ajudar a melhorar seus códigos e entender a "lógica".

Abraço

Entendi, mas foi praticamente isso que eu disse no primeiro post, o elemento precisa cobrir todo o viewport. Talvez eu só não tenha sido claro, bem verdade isso.

Bom, fico feliz que tenha resolvido o problema e ter aprendido essa técnica. Bons estudos!