Gostaria de entender porque, quando usamos as funções alert
, confirm
ou prompt
, as mesmas sempre causam uma espécie de "congelamento" na tela.
Por exemplo, eu tenho um alert
e, em seguida, tenho uma div
com um estilo definido. O estilo da div
só ficará visível depois que eu fechar o alert
.
<script>alert('oi')</script>
<div style="background-color: black;height: 50px">
</div>
Pensava que se travava da ordem como as coisas foram definidas, mas parece que não é bem isso:
<div style="background-color: black;height: 50px"></div>
<script>alert('oi')</script>
Eu já notei também que, em outros casos, quando você tem uma definição dinâmica de criação de elementos, a mesma coisa acontece.
No exemplo abaixo, eu já tenho um elemento criado, porém, depois de um tempo, eu crio outro dinamicamente e, em seguida, chamo a função confirm
.
setTimeout(function () {
var div = document.createElement('div');
div.innerHTML = 'Nova div';
document.body.appendChild(div)
confirm('oi')
}, 200)
<div style="background-color: black;height: 50px"></div>
O resultado é que, mesmo eu definindo document.body.appendChild
antes de confirm
, o appendChild
parece ser executado apenas depois do fechamento de confirm
.
Por que os diálogos nativos do Javascript "travam" o processo de criação de elementos e definições de estilo?
Tendo em vista que as vezes isso causa um "brancão" indesejado na tela, como eu poderia chamar
alert
,confirm
ouprompt
sem que isso interfira no carregamento da página?