Como criar um modal?

Para criar um modal, você pode utilizar HTML, CSS e JavaScript. Aqui está um exemplo básico: 1. Crie um botão que irá abrir o modal: ``` Abrir Modal ``` 2. Crie o modal em HTML: ```

``` 3. Adicione o CSS para estilizar o modal: ``` .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-conteudo { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .fechar-modal { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .fechar-modal:hover, .fechar-modal:focus { color: black; text-decoration: none; cursor: pointer; } ``` 4. Adicione o JavaScript para abrir e fechar o modal: ``` var modal = document.getElementById("modal"); var botaoAbrir = document.getElementById("abrir-modal"); var botaoFechar = document.getElementsByClassName("fechar-modal")[0]; botaoAbrir.onclick = function() { modal.style.display = "block"; } botaoFechar.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` Pronto! Agora você tem um modal básico que pode ser personalizado de acordo com suas necessidades.