Modais em Bootstrap

25/11/2016

Ol�, pessoal. Abri este t�pico para que possamos compartilhar exemplos de uso, dicas e experi�ncias com o plugin de modais do Bootstrap. Neste artigo podemos ver como utilizar os modais e alguns exemplos b�sicos: https://www.devmedia.com.br/bootstrap-modal-como-utilizar-em-seus-projetos/37426.

Joel Rodrigues

Curtir t�pico + 0

Responder

Post mais votado

25/11/2016

Aqui criei um exemplo de formul�rio com v�rios campo em um modal, que possui dois bot�es: Cadastrar e Cancelar:

<div class="modal fade" id="modal-cadastro">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>�</span></button>
                <h4 class="modal-title">T�tulo da mensagem</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="txt-nome">Seu nome</label>
                    <input type="text" class="form-control" placeholder="Nome" id="txt-nome">
                </div>
                <div class="form-group">
                    <label for="txt-nome">Seu e-mail</label>
                    <input type="text" class="form-control" placeholder="E-mail" id="txt-email">
                </div>
                <div class="form-group">
                    <label for="txt-nome">Sua senha</label>
                    <input type="password" class="form-control" placeholder="Senha" id="txt-senha">
                </div>
                <div class="form-group">
                    <label for="txt-nome">Confirme a senha</label>
                    <input type="password" class="form-control" placeholder="Confirma��o da a senha" id="txt-confirmacaosenha">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success">Cadastrar</button>
            </div>
        </div>
    </div>
</div>

Joel Rodrigues

Responder

Gostei + 5

Mais Posts

31/01/2017

Joel Rodrigues

Uma biblioteca muito boa para lidar com modais no Bootstrap � a Bootbox. Ela simplifica a cria��o do HTML, deixando apenas uma chamada �s suas fun��es. Por exemplo:

bootbox.alert("Hello world!");

Com isso, n�o precisamos criar tantas divs.

Responder

Gostei + 5