` com a classe `modal-body`. Este elemento conterá o conteúdo principal do modal, como texto, elementos de formulário ou imagens.
```html
```
7. Adicione um elemento `
` com a classe `modal-footer`. Este elemento conterá quaisquer botões ou ações que você deseja fornecer, como um botão "Salvar" ou "Fechar".
```html
```
8. Adicione os botões que deseja incluir dentro do `modal-footer`.
```html
```
9. Feche todas as tags abertas, começando em `
` para `modal-content`, então `
` para `modal-dialog` e, finalmente, `
` para `modal`.
CSS:
Aplique estilos CSS ao seu modal para personalizar sua aparência. Por exemplo:
```css
.modal {
largura:50%;
}
```
JavaScript:
Para habilitar a funcionalidade do modal, você precisa usar JavaScript. Veja como:
1. Importe a biblioteca Bootstrap JavaScript para o seu arquivo HTML.
```html
```
2. Use JavaScript para inicializar o modal. Você pode fazer isso escrevendo um script da seguinte forma:
```javascript
var meuModal =new bootstrap.Modal(document.getElementById('exampleModal'), {
teclado:falso
})
```
Este código JavaScript inicializa o modal com o ID especificado (#exampleModal) e evita que ele seja fechado pressionando a tecla Esc (definindo a opção `keyboard` como `false`).
E é isso! Seguindo essas etapas e combinando HTML, CSS e JavaScript, você pode criar facilmente um pop-up modal funcional e personalizável usando Bootstrap 5.
