Modal

Modal Padrão

Você pode utilizar o código à baixo para criar um modal, que quando clicado mostra um aviso com as opções.
Eles podem ser fechados, clicando no "X", clicando em "Fechar" ou Clicando fora do modal.

                        
                            <button
                            type="button"
                            class="btn-custom-roxo-medio-arredondado"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModal">
                            Exemplo de Modal
                            </button>
                        
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel">Este
                                é um modal de exemplo</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">Conteúdo
                                que você pode escrever</div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn-custom-vermelho" data-bs-dismiss="modal">Fechar</button>
                                        <button type="button" class="btn-custom-vermelho">Salvar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    

Modal estático

Você pode utilizar o código à baixo para criar um modal estático, que quando clicado mostra um aviso com as informações.
Eles podem ser fechados, clicando no "X", clicando em "Fechar" se clicar fora do botão ele não vai aceitar.

                            <button type="button" class="btn-custom-laranja-medio-arredondado"
                                data-bs-toggle="modal" data-bs-target="#staticBackdrop">Esse é um modal estático</button>

                            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="staticBackdropLabel">Exemplo de modal estático</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">Conteúdo do
                                    modal</div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn-custom-vermelho" data-bs-dismiss="modal">Fechar</button>
                                            <button type="button" class="btn-custom-azul">Eu
                                    entendi</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        

Modal com Scroll (conteúdo grande)

Utilizando esse modal, você tem a possibilidade de usar textos grandes dentro do seu modal

                            <button type="button" class="btn-custom-verde-medio-arredondado"
                                data-bs-toggle="modal" data-bs-target="#scrollableModal">modal com Scroll</button>

                            <div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
                                <div class="modal-dialog
                                    modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="scrollableModalLabel">modal com Scroll</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Nesse pop up não tem limite de tamanho para textos, ele se adapta e
                                    começa a scrolar</p>
                                            <p>... (adicione vários parágrafos para forçar o scroll)
                                    ...</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn-custom-vermelho" data-bs-dismiss="modal">Fechar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        

Modal com formulário

Utilizando esse modal, você tem a possibilidade de usar formularios dentro do seu modal

                            <button type="button" class="btn-custom-azul-medio-arredondado"
                                data-bs-toggle="modal" data-bs-target="#formModal">modal com Formulário</button>

                            <div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <form class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="formModalLabel">Formulário no modal</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="nome" class="form-label">Nome</label>
                                                <input type="text" class="form-control" id="nome" required>
                                            </div>
                                            <div class="mb-3">
                                                <label for="email" class="form-label">E-mail</label>
                                                <input type="email" class="form-control" id="email" required>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn-custom-vermelho" data-bs-dismiss="modal">Cancelar</button>
                                            <button type="submit" class="btn-custom-verde">Enviar</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        

Modal não bloqueante

Utilizando esse modal, o conteúdo atrás do modal continua disponível.

                            <button type="button" class="btn-custom-vermelho-vazado-medio-arredondado"
                                id="nonBlockingBtn">modal Não Bloqueante</button>

                            <div class="modal fade" id="nonBlockingModal" tabindex="-1" aria-labelledby="nonBlockingLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="nonBlockingLabel">modal não bloqueante</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                        </div>
                                        <div class="modal-body">
                                            Você pode interagir com o
                                    conteúdo atrás deste modal.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        