Ir para conteúdo
Luccas Gaulia

Modal do Bootstrap não funciona

Recommended Posts

Ola Pessoal,

 

Com botão ele funciona, automaticamente não...

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Administracion Hotel City Express</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Google fonts -->
  <link href='https://fonts.googleapis.com/css?family=Graduate|Pacifico' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

  <link href="css/style.css" rel="stylesheet" type="text/css"/>
  <link href="css/menu.css" rel="stylesheet" type="text/css"  />

  <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
  <script src="js/jquery.validate.js" type="text/javascript"></script>
  <script src="js/validacao.js" type="text/javascript"></script>
  
  <link href="../favicon.ico" rel="shortcut icon"> 
  <script type="text/javascript">
    $(document).ready(function() {
    $('#myModal').modal('show');
    });

  </script>
</head>
<body>

<div class="container">

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
      <div class="modal-dialog modal-sm">
            <div class="modal-content se-center">
          <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="window.location.href='index.php?page=equipList';">
                    <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                  <p></p><div class="se-alert-success">
              <i class="fa fa-thumbs-o-up fa-3x"></i>
                </div>
              <div class="alert alert-success">
                Enmienda Efectuada con éxito
              </div>
              <p></p>
          </div></div>
      </div>
    </div>

</div>

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Iceris,

 

Obrigado pela pergunta resolvi quando verifiquei que estava utilizando um JS no meio que estava inibindo o modal, retirando ele funcionou :P

  <script src="js/jquery-1.7.2.js" type="text/javascript"></script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Gustavo2503
      Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:
      index.html
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js
      class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }  
    • Por isaque_cb2
      Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso?
      print 1: (modo mobile do inspecionar)

      no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato!
      http://prntscr.com/mvj3ed
       
      Grato desde já!
    • Por mateumt15
      Tenho uma tabela com muitas linha e uma dessas linha e muito grande, ja tentei varias coisas para arrumar mas nenhuma delas deu jeito nisso segue a tabela
       
       
      <div class='wrapper-modal-editor'>
              <div class='block my-4'>
                  <div class='d-flex justify-content-center'>
                  </div>
              </div>
            <table id='dtBasicExample' class='table table-striped table-bordered table-responsive'>
              <thead>
                <tr>
                  <th class='th-sm'>Id Link
                  </th>
                  <th class='th-sm'>Link
                  </th>
                  <th class='th-sm'>Data Inicio
                  </th>
                  <th class='th-sm'>Data Fim
                  </th>
                  <th class='th-sm'>Ação
                  </th>
                  <th class='th-sm'>Dominio
                  </th>
                  <th class='th-sm'>Seleção
                  </th>
                </tr>
              </thead>    
              <div>
               
              <script src='../js/jquery-3.2.1.min.js'></script>
              <script src='../js/popper.min.js'></script> 
              <script src='../js/bootstrap-4.0.0.js'></script>
             
              </div>
          </div>
      <tbody>
      <tr>
      <td>27</td>
      <td>c.apple.com/r?v=2&amp;la=pt&amp;lc=bra&amp;a=z2%2Bnb8HWCoHziyJtbRYNxDd%2FkgyZjZvGSC81JOPXnypgazdDEpi9VZFGWHLJPWmuLtv6bjDTIDHd4zoATogPVtQ0TnXoWLHI2XQ1aVDI5YpHS0D4qfYHYB09Aq0qVHjRe8TR8%2Fo56d7spUwxrFdNL9jusvKWFiLfJBTgZkKsbI4pWRAyzrFaNxkIWNXu%2Fakj&amp;ct=aI3g7L0A3k</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      </tr>
      </table>
       
    • Por eduardojc
      Boa tarde pessoal, tenho uma tabela que busca os valores no meu MYSQL.

      Tenho um id ( 199917 ) por exemplo. Ele aparece 10x no meu banco de dados

      1 - 199917  data1 peso1
      2 - 199917  data2 peso2
      3 - 199917  data3 peso3
      ..... etc

      Precisaria retornar da seguinte forma minha tabela

      199917  - data1 peso1
                       data2 peso2
                       data3 peso3

      199939  - data1 peso1
                       data2 peso2
                       data3 peso3

      em anexo está as imagens, ficaria grato se puderem ajudar, dei uma pesquisada vi que tem rowspan, mas não faço ideia de como agrupar.

      Tabela 1 como está, tabela 2 como gostaria que ela fica-se

      meu Código:
      <div class="linha"></div> <div class="container"> <table class="table table-striped"> <thead class="thead-dark"> <tr> <th rowspan="1">Brinco</th> <th scope="col">Peso</th> <th scope="col">Data</th> <tr> </thead> @foreach($listagem as $lista) <tbody> <tr> <td rowspan="1">{{$lista->brinco_id }}</td> <td>{{$lista->peso }}</td> <td>{{ \Carbon\Carbon::parse($lista->data)->format('d/m/Y') }}</td> </tr> </tbody> @endforeach </table> </div>

    • Por michelmir
      Olá a todos.
       
      Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax:
      <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button> <!-- Modal --> <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" >Adicionar dados</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="usersform" method="post"> <input type="text" name="nome" id="nome"/> <input type="email" name="email" id="email"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button> <button type="submit" class="btn btn-success" id="submit" >ADD USER</button> </form> </div> </div> </div> </div> E abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados:
      <script> $(document).on('submit', '#usersform', function(event){ event.preventDefault(); $.ajax({ url:"insert.php", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data){ alert("Cadastro realizado com sucesso!"); $("#usersform")[0].reset(); $("#dataModal").modal('hide'); } }); }); </script> O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.
×

Informação importante

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