Como posso mantê-la e acessar meu index normalmente? Existe a possibilidade de mostrá-la quando carrega a página, mas incluir um botão de fechar?

Criei uma box shadow que simula um modal, ficou ótima, até fiz umas estilizações pessoais. Como posso mantê-la e acessar meu index normalmente? Existe a possibilidade de mostrá-la quando carrega a página, mas incluir um botão de fechar ou desaparecer depois de x segundos?

<body>
    <div class="caixa-dialogo">
        <p>Parabéns, você é nosso 1000º visitante. Você ganhou um brinde!</p>
    </div>
...
</body>

index.css: .caixa-dialogo { width: 40%; 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: 10% 3%; text-align: center; font-family: 'Tangerine', serif; font-size: 3em; }

Oi Jane, tudo bem?

Sim, é possível! Mas como envolve interação, melhor saída é ir de JavaScript.

No Codepen você encontra diversas implementações diferentes, com jQuery e sem jQuery, com Sass e sem Sass, para se basear e fazer a sua.

Um caminho: a janela vem fechada (com display none no CSS) por padrão, quando o usuário clica em um botão ou depois de um determinado período de tempo (aí envolve o JS, algo com evento de load e um setTimeout por exemplo) muda o display para block.

O botao de fechar vai seguir a lógica contrária, tendo que dar um display none nela.

Depois de pegar e fazer o curso inicial de JS aqui da Alura tenta fazer isso, é um bom desafio!

Espero ter ajudado e bons estudos,

Abcs!