Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MarKteus

Botão fechar da janela modal não funciona

Por , em .NET

Recommended Posts

MarKteus    1

MarKteus
Postado

Olá

 

Criei uma janela modal com bootstrap ao final acrescentei conforme abaixo um botão para fechar a janela

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>

Porém ao clicar nada acontece, ou seja, a janela não se fecha.

Alguém sabe o que está faltando acrescentar, ou onde está errado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Galassi    0

Guilherme Galassi
Postado

Siga esse exemplo encontrado na página do Bootstrap.

 

Verifique também se está referenciando corretamente o script do bootstrap e jQuery.

 

Se não funcionar, poste seu código inteiro para análise.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

KhaosDoctor    242

KhaosDoctor
Postado

O bootstrap não tem um bom handler de modais, então se não rolar, acredito que o jeito mais simples seria pelo próprio jQuery que nem está no site do bootstrap.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarKteus    1

MarKteus
Postado
Olá pessoal adicionei o ID na DIV do modal, mas mesmo assim nada, acrescentei também o script jQuery para testar, o alert funciona mas é só. A janela modal nada.
Se alguém enxergar o erro no code abaixo por favor me avise

<!DOCTYPE html>
<html>
<head>
<title>Curso de Bootstrap3 - Devmedia</title>
<!--- Define a Viewport-->
<meta name="viewport" content="witdh=device, initial-scale=1.0">
<meta charset="utf-8">
<!-- adicionar CSS Bootstrap-->
<link href="http://localhost/MvcBootSample/css/bootstrap.min.css" rel="stylesheet" media="all">
<!-- css personalizado -->
<!--link href="http://localhost/MvcBootSample/css/estilo.css" rel="stylesheet" media="all"-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="pageheader">
<h1>Janelas Modais</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">Abrir janela modal</button>
<!-- // Janela modal-->
<div class="modal" id="modal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<span aria-hidden="true">×</span>
<span class="sr-only">Fechar Janela Modal</span>
<h4 class="modal-title">Janela Modal</h4>
</div>
<div class="modal-body">
<p>Conteúdo da janela modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Outro</button>
</div>
</div>
</div>
</div>
</div>
<!-- Janela modal-->
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function (){
//Equivale ao load da página
alert("Entrei");
$("#modal").modal("show");
setTimeout(function(){
$("#modal").modal("hide");
}, 3000);
});
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos .NET

  • Conteúdo Similar

    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • ILR master
      Cronômetro regressivo php
      Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • clovis.sardinha
      Como colocar um spinner do bootstrap antes do carregamento da query com o codeigniter.
      Por clovis.sardinha
      Como fazer para colocar um spinner antes de carregar os dados do bd? Eu clico no link e entra na função do controle e só vai para a página da views quando já está pronto a query. Vi uns exemplos de colocação de spinner, mas se a página ainda não apareceu como faço? Vou anexar a função que chama a página para facilitar. 
      public function inativos()  {     $session = \Config\Services::session();     $pager = \Config\Services::pager();     $usuarios=$this->usuarios->getInativos();//faz a query no bd.     $dados=[         'usuarios'=>$usuarios,         'pager'=>$this->usuarios->pager,     ];     echo view('Admin/Relatorios/listaInativos',$dados); }   
    • Danilo - Jesus voltará!
      Pegar class e id gerado dinamicamente em requisição ajax (javascript) e php
      Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • joeythai
      combobox repetindo registros
      Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito