Modais em Bootstrap

Bootstrap

Front-end

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

Joel Rodrigues

Curtidas 0

Melhor post

Joel Rodrigues

Joel Rodrigues

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>
GOSTEI 5

Mais Respostas

Joel Rodrigues

Joel Rodrigues

25/11/2016

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.
GOSTEI 5
Washington Gomes

Washington Gomes

25/11/2016

Bom dia.

Meu modal funciona perfeitamente, mas estou com um problema que está me tirando o sono ha dias.

Tenho uma pagina que chama um modal, nesse modal chamo um segundo modal, até ai tudo bem, porém, ao fechar esse segundo modal a barra de rolagem vertical não responde ao primeiro modal aberto e sim a pagina que está por trás...

Alguém aí já passou por isso, já vi vários casos iguais em fóruns americanos, porém não encontrei solução em nenhum.
GOSTEI 0
POSTAR