Jump to content
Rengavitp

Resolvido - Problema com modal Bootstrap

Recommended Posts

Boa noite pessoal, estou aprendendo web e estou passando trabalho com uma janela modal. na versão desktop para que o modal apareça direito preciso colocar varios <br> antes do footer se não ele fica perdido no meio do modal, ja na versão mobile ele fica com um espação antes do footer devido aos <br> se eu tiro ele acerta o mobile mas da problema no desktop. alguém pode me ajudar? abaixo o modal

<!-- Modal Cadastrar-->
		<div class="modal fade" id="novo_cadastro" role="dialog">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Novo Associado</h4>
					</div>
					<div class="modal-body">
						<div class="col-md-2">
							<label for="c_id">ID</label>
							<input type="text" class="form-control cadastro" id="c_id" placeholder="*" disabled="">
							<br>
						</div>
						<div class="col-md-10">
							<label for="c_empresa">Empresa</label>
							<input type="text" class="form-control cadastro" id="c_empresa" name="c_empresa" placeholder="Empresa" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-3">
							<label for="c_cnpj">CNPJ</label>
							<input type="text" class="form-control cadastro" id="c_cnpj" name="c_cnpj" onkeypress="$(this).mask('00.000.000/0000-00');" placeholder="Ex.: 00.000.000/0001-00" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_ie">I.E</label>
							<input type="text" class="form-control cadastro" id="c_ie" name="c_ie" onkeypress="$(this).mask('0.000.000');" placeholder="Ex.: 000.000.000" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-3">
							<label for="c_ass">Contato</label>
							<input type="text" class="form-control cadastro" id="c_nome" name="c_nome" placeholder="Nome" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_segmento">Segmento</label>
							<select id="c_segmento" name="c_segmento" class="form-control input-md cadastro">
								<option value='1'>ALIMENTAÇÃO</option>
								<option value='0'>COMÉRCIO</option>
							</select>
							<br>
						</div>
						<div class="col-md-3">
							<label for="c_telefone">Telefone</label>
							<input type="text" class="form-control cadastro" id="c_telefone" name="c_telefone" onkeypress="$(this).mask('(00) 0000-00009')" placeholder="(XX) XXXXX-XXXX" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-5">
							<label for="c_email">E-mail</label>
							<input type="email" class="form-control cadastro" id="c_email" name="c_email" placeholder="XXX@XXX.com.XX" style="text-transform:lowercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_status">Status</label>
							<select id="c_status" name="c_status" class="form-control input-md cadastro">
								<option value='1'>ATIVO</option>
								<option value='0'>INATIVO</option>
							</select>
							<br>
						</div>
						<div class="col-md-2">

						</div>
						<div class="col-md-6">
							<label for="c_endereco">Endereço</label>
							<input type="text" class="form-control cadastro" id="c_endereco" name="c_endereco" placeholder="Endereço" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_nro">Nro</label>
							<input type="number" class="form-control cadastro" id="c_nro" name="c_nro" placeholder="NRO" onkeypress="$(this).mask('00000')" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_bairro">Bairro</label>
							<input type="text" class="form-control cadastro" id="c_bairro" name="c_bairro" placeholder="Bairro" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_complemento">Complemento</label>
							<input type="text" class="form-control cadastro" id="c_complemento" name="c_complemento" placeholder="Complemento" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_municipio">Município</label>
							<input type="text" class="form-control cadastro" id="c_municipio" name="c_municipio" placeholder="Município" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_cep">Cep</label>
							<input type="text" class="form-control cadastro" id="c_cep" name="c_cep" placeholder="CEP" onkeypress="$(this).mask('00000-000')" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_uf">UF</label>
							<select id="c_uf" name="c_uf" class="form-control input-md cadastro">
								<option value="">Selecione</option>
								<option value="AC">Acre</option>
								<option value="AL">Alagoas</option>
								<option value="AP">Amapá</option>
								<option value="AM">Amazonas</option>
								<option value="BA">Bahia</option>
								<option value="CE">Ceará</option>
								<option value="DF">Distrito Federal</option>
								<option value="ES">Espirito Santo</option>
								<option value="GO">Goiás</option>
								<option value="MA">Maranhão</option>
								<option value="MS">Mato Grosso do Sul</option>
								<option value="MT">Mato Grosso</option>
								<option value="MG">Minas Gerais</option>
								<option value="PA">Pará</option>
								<option value="PB">Paraíba</option>
								<option value="PR">Paraná</option>
								<option value="PE">Pernambuco</option>
								<option value="PI">Piauí</option>
								<option value="RJ">Rio de Janeiro</option>
								<option value="RN">Rio Grande do Norte</option>
								<option value="RS">Rio Grande do Sul</option>
								<option value="RO">Rondônia</option>
								<option value="RR">Roraima</option>
								<option value="SC">Santa Catarina</option>
								<option value="SP">São Paulo</option>
								<option value="SE">Sergipe</option>
								<option value="TO">Tocantins</option>
							</select>
							<br>
						</div>
						<div class="col-md-12">
							<label for="c_descricao">Descrição</label>
							<textarea class="form-control" id="c_descricao" name="descricao" rows="4" cols="130"></textarea>
							<br>
						</div>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-success" id="cadastrar">Cadastrar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
						</div>
				</div>
			</div>
		</div>

 

Share this post


Link to post
Share on other sites
6 horas atrás, Maujor disse:

@Rengavitp
Testei seu código aqui e ele funciona perfeitamente sem as BR.
O que significa:  "...se não ele fica perdido no meio do modal,"?
Quem é ele? Perdido????

@Maujor

Opa acho que acabei não sendo claro, seu retiro os <br> os dois botões e a linha que separa o rodapé vao parar no meio do modal misturados aos inputs, isso no desktop ja no mobile fica ok, ai se incluo os <br> acerta no desktop mas fica um espaço enorme entre o fim dos inputs e o rodapé.

Share this post


Link to post
Share on other sites

@Rengavitp Boas, pode ser algum problema no seu css, de qualquer forma o Bootstrap recomenda que: "Colunas" sejam inseridas dentro de "Linhas", assim como estas necessitam estar dentro de "Containers", então a sugestão é que dentro do "modal-body" a estrutura ideal seja algo como:

<div class="container">

    <div class="row">

        <div class="col-xx-xx">...

Outro detalhe é que seus campos de formulário deveriam estar dentro do container apropriado: "<form..."

Verifique também se fechou todas as DIV's. Então provavelmente com essas correções o problema seja resolvido.

 

Att.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By proflupin
      criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro.
      A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While?
      Código:
       
      <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>  
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By xdxddxd
      Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique.
      se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido.
      estou usando o accordion padrão do bootstrap 4+
      Clique neste: Exemplo
    • By lamounier
      Estou desenvolvendo um site que carrega os últimos 6 vídeos adicionados, e quando clica em algum abre um modal para assistir o vídeo, quando fecho o modal o vídeo continua rodando, estou tentando fazer com que o vídeo pare mas não estou conseguindo.

      home.php
      <?php if (!empty($videos)) { $i=0; foreach ($videos $videos) { ?> <div class="col-md-4"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <figcaption> <a href="#" class="video-btn" id="#video_<?=$video["video_id"]?>" data-src="https://www.youtube.com/embed/<?=$video["link"]?>" data-toggle="modal" data-target="#video_<?=$video["video_id"]?>"></a> </figcaption> </figure> </div> </div> <div class="modal fade" id="video_<?=$video["video_id"]?>" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="X"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="Modal-label-1"><?=$video["titulo"]?></h4> </div> <div class="modal-body"> <div class="embed-responsive embed-responsive-16by9"> <iframe id="video_iframe" width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="modal-works"><span><?=$video["autor"]?></span></div> <p><?=$video["video_description"]?></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default teste" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> <?php if (++$i == 6) break;} // FOREACH } // IF ?> </div>  

      .js
      var videoSrc; var videoId; $('.video-btn').click(function() { videoSrc = $(this).data( "src" ); videoId = $(this).data('target'); //aqui pego o id do modal }); //aqui pauso o vídeo quando fecho o modal, mas só funciona se eu colocar diretamente o id "$('#video_...') " $(videoId ).on('hide.bs.modal', function () { $("#video_iframe").attr('src',videoSrc); })  
      alguém sabe como faço para o modal para o vídeo quando fechado?
    • By manolegal
      Bom dia
      Após selecionar a Pessoa em um formulário, tenho um botão para editar os dados desta pessoa em um Modal:
      <span class="input-group-addon"><a href="#" id="btn_editar" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modal_edit_pessoa_red"></a></span> Busco os dados no BD e preencho os inputs do modal:
      <script type="text/javascript"> $(document).ready(function () { $('#btn_editar').click(function () { var id = $("#id_cont_hid").val(); var id_cont= JSON.stringify(id); $.ajax({ type: "POST", url: "minha_busca_bd?id=" + id, cache: false, data: "{'id':'" + id_cont + "'}", dataType: 'json', }).done(function(retorno){ if (retorno.inserido == true) { $('#md_edit_pes_cpf').val(retorno.dados.cpf); // Atualizo valor campo cpf $("#md_edit_pes_cpf").mask("999.999.999-99"); // Adiciono máscara cpf } .......... Em relação aos dados está funcionando corretamente.
      O problema é em relação às máscaras de entrada dos campos (cpf) que na primeira vez que for alterar os dados está vindo corretamente, porém, caso tente alterar novamente os dados da mesma pessoa, a máscara não funciona (não vem formatado corretamente).
      Outro detalhe é  que o modal não está sendo resetado (limpo), principalmente após tentativa de edição e ser mostrada mensagem do arquivo PHP que faz a validação dos dados inseridos, uma vez que ao fechar o modal e ao reabri-lo novamente continua mostrando a mensagem de validação, o que eu não gostaria que acontecesse, mas que cada vez que o modal fosse fechado ou finalizado, limpassem os seus dados, para novamente serem carregados após clicar no botão de edição.
      Partes do código que faço a validação do modal:
       
      var serialize_dados = $('#form_mod_pes_edit_red').serialize(); $.ajax({ type: "POST", url: "arquivo_validar.php", data: serialize_dados, dataType: 'json', encode: true, cache: false, }).done(function(retorno){ if (retorno.inserido == true) { $("#mensagem_edit_pes_red").html("Cadastro alterado com sucesso!"); //auto.trigger('click'); $('#form_mod_pes_edit_red').each (function(){ // Limpar campos do Form this.reset(); $('#mensagem_edit_pes_red').html(""); $('#form_mod_pes_edit_red')[0].reset(); }); setTimeout(function () { //$('#modal_edit_pessoa_red').on("hidden.bs.modal", function(){ $(this).removeData(); }); $('#mensagem_edit_pes_red').html(""); // Limpa mensagens $('#modal_edit_pessoa_red').modal('hide') //$('#form_mod_pes_edit_red').on('hidden.bs.modal', function () { //$('#modal_edit_pessoa_red').on('hidden.bs.modal', function(){ $(this).find('form')[0].reset(); }); }, 2000); // 2seg $('#obs_ped').val("Endereço: "+ retorno.dados.endereco+ " Telefone: "+ retorno.dados.telefone); } else{ if (retorno.erros){ $('#mensagem_edit_pes_red').html(""); for(var i=0;i<retorno.erros.length;i++) { $('#mensagem_edit_pes_red').append(retorno.erros[i] + "<br>"); } } else{ $("#mensagem_edit_pes_red").html("Não foi possível completar o cadastro. Tente novamente!"); } } }); Já tentei de várias maneiras, porém não consigo encontrar a solução.
      No botão fechar do modal também inseri vários códigos para tentar limpar o modal ao sair, porém não obtive sucesso.
      Se alguém tiver alguma dica, agradeço.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.