Ir para conteúdo

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?
    • gersonab
      recuperar url do pdf q foi criado
      Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • 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); }   
    • gersonab
      editar , montar uma imagem online
      Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

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

  Aceito