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 Cícero Antônio
      Olá pessoal
       
      Migrei recentemente para um novo provedor e não consigo carregar o BOOTSTRAP de forma interna. Só consigo carregar através do link externo.
       
      Assim não consigo carregar:
      <link rel="stylesheet" href="https://www.meusite.com/assets/bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      Assim eu consigo:
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Alguém já passou por isso?
       
      O caminho interno está correto; o arquivo está onde deveria estar; em outro provedor estava funcionando normalmente. Atualmente precisei migrar o site para o provedor HostGator e agora me apresentou esse problema. 
       
      Se alguém já tiver passado por isso e tiver uma solução eu agradeço.
       
    • By asacap1000
      Salve galera.
      Tenho uma página com vários box deste abaixo com a descrição de uma TV que temos na empresa onde mostram os status de diversos processos.
      Ainda não coloquei o link para o direcionamento porém antes da pessoa clicar eu gostaria que quando posicionasse o mouse em cima do botão aparecesse uma miniatura do site destino.
      é Possivel isso?? eu tentei o mouseover mas não carregou, 
       
                  <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-blue-gradient" style="border-radius: 05px 05px;">
                      <div class="inner">
                        <h3 align="center"><?=$qtd_veiculos?></h3>
                        <p align="center">VEÍCULOS EM TRÂNSITO</p>
                      </div>
                    </div>
                  </div>
       
    • By babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • By Sapinn
      Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz:
       
      CSS:
      * {   box-sizing:border-box;   font-family: Arial; } .slideshow-container {   max-width: 800px;     position: relative;   margin: auto; } .mySlides {   display: none; } .prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: #4285f4;   font-weight: bold;   font-size: 28px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0;   user-select: none; } .next {   right: 0;   border-radius: 3px 0 0 3px; } .prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8); } .dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 10px 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; } .active, .dot:hover {   background-color: #4285f4; } .fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; } .img_slide{     width: 100%;     height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, .8);     position: fixed;     top: 0px;     left: 0px;     z-index: 2000;     display: none;     justify-content: center;     align-items: center;     font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{     display: flex; } @keyframes modal{     from{         opacity: 0;         transform: translate3d(0, -60px, 0);     }     to{         opacity: 1;         transform: translate3d(0, 0, 0);     } } .mostrar .modal-content{     animation: modal .3s; } .fechar{     position: absolute;     top: 8px;     right: 3px;     width: 30px;     height: 30px;     font-weight: bold;     color: #4285f4;     font-size: 25px;     font-family: Arial, Helvetica, sans-serif;     cursor: pointer;     background: transparent;     border: none; } @media (max-width: 600px) {     .img_slide{         width: 100%;         height: 300px; } }  
       
      JAVASCRIPT:
      var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) {   showSlides(slideIndex += n); } function currentSlide(n) {   showSlides(slideIndex = n); } function showSlides(n) {   var i;   var slides = document.getElementsByClassName("mySlides");   var dots = document.getElementsByClassName("dot");   if (n > slides.length) {slideIndex = 1}    if (n < 1) {slideIndex = slides.length}   for (i = 0; i < slides.length; i++) {       slides[i].style.display = "none";    }   for (i = 0; i < dots.length; i++) {       dots[i].className = dots[i].className.replace(" active", "");   }   slides[slideIndex-1].style.display = "block";    dots[slideIndex-1].className += " active"; } function iniciaModal(modalID){     const modal = document.getElementById(modalID);     if(modal){         modal.classList.add('mostrar');          modal.addEventListener('click',(e)=>{         if(e.target.id == modalID || e.target.className == 'fechar'){             modal.classList.remove('mostrar');         }     });     }      } const botaoChama = document.querySelector('#botaoChama');  botaoChama.addEventListener('click',()=>{     iniciaModal('modal');      }); const botaoChama2 = document.querySelector('#botaoChama2');  botaoChama2.addEventListener('click',()=>{     iniciaModal('modal2'); });  
       
      HTML:
      <div id="modal" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide">            </div>        <div class="mySlides fade">             <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(1)"></span>          <span class="dot" onclick="currentSlide(2)"></span>          <span class="dot" onclick="currentSlide(3)"></span>        </div>   </div>    </div>  <div id="modal2" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp8480719.jpg"  class="img_slide">            </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp9683280.jpg"  class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(4)"></span>          <span class="dot" onclick="currentSlide(5)"></span>          <span class="dot" onclick="currentSlide(6)"></span>        </div>   </div>    </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>
    • By Rasp
      Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:
       
      Possuo um array X com dados que vem do meu backend, exemplo:
       
      array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ];
      Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:
       
      | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.
       
      Como poderia construir essa lógica?
×

Important Information

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