Ir para conteúdo

POWERED BY:

Arquivado

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

manolegal

Problema Modal no Bootstrap

Por , em Desenvolvimento frontend

Recommended Posts

manolegal    12

manolegal
Postado

Boa tarde amigos.

Estou com problemas para abrir um form modal com bootstrap. Ao chamar o modal, ele não abre. Abaixo o código:

menu_superior.php

<?php
if (file_exists("verifica.php")) {   require_once("verifica.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=pagina.php'>";}
if (file_exists("executa.php")) {    require_once("executa.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=pagina.php'>";}
if (file_exists("funcoes.php")) {    require_once("funcoes.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=pagina.php'>";}

$nome = $_SESSION["nome"];
?>

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">                
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Menu</title>
        <meta name="generator" content="Menu" />
        
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">   
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/form_select_sn.css">
        
<style>
    #brand-image{
        height: 50px;
    }
    body {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .form-control:invalid {
                border: 1px solid #cc0000;
            }
</style>             
        
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-3-3-4.min.js"></script>     
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/navegar.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>     
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>    
    <script type="text/javascript" src="js/jquery-latest.js"></script>    
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
    $('#refresh').load('refresh_pagina.php');
    refresh();});
    function refresh(){
        setTimeout(function(){
            $('#refresh').fadeOut('slow').load('refresh_pagina.php').fadeIn('slow');
            refresh();
        }, 50000);
    }   
</script>

</head>
<body>

<!-- header -->
<nav id="top-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">    
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Menu</a>
        </div>
        <div class="collapse navbar-collapse" id="barra">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.php">Início</a></li>
                <li><a href="#about">Cadastros</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">Pessoas<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#" onclick="pessoas_cadastrar();">Cadastrar</a></li>
                        </ul>
                    </li>    
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">Funcionários<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="funcionarios_cadastro_b.php">Cadastrar</a></li>
                        </ul>
                    </li>                     
                    
                <li><a href="#" onclick="funcionarios_gerenciar();">Usuários</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><?php echo " $nome_usuario "; ?><span class="caret"></span></a>
                    <ul id="g-account-menu" class="dropdown-menu" role="menu">
                    <li><a href="#">Alterar Senha</a></li>
                 </ul>
                </li>
                <li><a href="logout.php" target="_top"><i class="icon-lock icon-white"></i> Logout</a></li>
            </ul>      
        </div><!--/.nav-collapse -->
    </div><!--/.container -->
</nav><!--/.header -->

funcionarios_cadastro_b

<?php
if (file_exists("verifica.php")) {   require_once("verifica.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}
if (file_exists("executa.php")) {    require_once("executa.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}
if (file_exists("funcoes.php")) {    require_once("funcoes.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}
header ('Content-type: text/html; charset=UTF-8');

$nome = $_SESSION["nome"];


if ($_SERVER['REQUEST_METHOD'] == "POST") {
$funcionario = $_POST ["funcionario"];
$.............


}

if((count($_POST) <= '0') OR (isset($msg_erro))){
if (file_exists("menu_superior.php")) {    require_once("menu_superior.php");}
            else { echo "<meta http-equiv='refresh' content='0;URL=pagina.php'>";}
?>

<div class="container-fluid"><!--/Abre Container Geral-->

    <div class="row-fluid"><!--/Abre Linha Geral-->  

        <div class="col-md-2"><!--/Abre Menu Lateral-->
        <?php
        if (file_exists("menu_esquerdo.php")) {    require_once("menu_esquerdo.php");}
            else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}
        ?>      
        </div><!--/Fecha Menu Lateral--> 

        <div class="col-md-10">
            <h3 class="page-header">Cadastrar Funcionário</h3>
 
            <div class="row"><?php echo "$msg_erro"?></div>
    
                <div class="row">
                    <form id="funcionarios_cadastro" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
   
                        <div class="row">
                            <div class="form-group col-md-4 col-md-offset-1">
                                <label for="funcionario">Funcionário(a)</label>
                                <select class="form-control" id="funcionario" name="funcionario" autofocus placeholder="Funcionário(a)" required onkeypress="return handleEnter(this, event)" onfocus="mudacor(this,'#DCDCDC')" onblur="mudacor(this,'white')">
                                <option value="">Selecionar Funcionário (Obrigatório)</option>
                                <?php
                                    $Sql = "SELECT ..........";
                                    // aqui tudo certo
                                ?>
                                </select>
                            </div>     
                        </div><!--/<div class="row">-->   
          
                        <div class="row">
                                 // outros campos
                        </div><!--/<div class="row">-->  
    
    <hr />

                        <div class="row">
                            <div class="col-md-8 col-xs-offset-4">
                                <button type="submit" class="btn btn-primary">Salvar</button>
                                <a href="#" onclick="funcionarios_gerenciar();" class="btn btn-default">Cancelar</a>
                            </div>
                        </div>

                    </form>

                </div><!--/<div class="row">-->
    
        </div><!--/col-md-10-->    
    
    </div><!--/Fecha Linha Geral-->

</div><!--/Fecha Container Geral-->
    
    
    <!-- Modal -->
<div class="modal fade" id="modal_cad_pessoa" 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">Cadastrar Pessoa</h4>
      </div>
      <div class="modal-body">
          <form method="post"  action="<?php echo $_SERVER['PHP_SELF']; ?>">
                  <div class="row">
                      <div class="col-md-6" form-group >
                        <label for="pessoa_nome">Nome</label>
                        <input class="form-control" type="text" id="pessoa_nome" name="pessoa_nome" autofocus placeholder="Informe o Nome da Pessoa... (Obrigatório)" required maxlength="50" onfocus="mudacor(this,'#DCDCDC')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)">
                      </div>
                  </div> <!-- /row -->    
              
          </form>
          
          
          ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="submit" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

<?php
}

if (($erro == 0) AND (!isset($msg_erro) AND (count($_POST) > '0'))) {
   // Inserção dos dados no BD
} 

?>

    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-3-3-4.min.js"></script>     
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/navegar.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>     
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>    
    <script type="text/javascript" src="js/jquery-latest.js"></script>    
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   
</body>
</html>

menu_esquerdo

<?php
if (file_exists("verifica.php")) {   require_once("verifica.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}
if (file_exists("executa.php")) {    require_once("executa.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}
if (file_exists("funcoes.php")) {    require_once("funcoes.php");}
    else { echo "<meta http-equiv='refresh' content='0;URL=direita.php'>";}

$nome = $_SESSION["nome"];
    
?>

                <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Cadastros</li>
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
                </div><!--/.well -->
                <div id="refresh" ></div>

Já fiz inúmeras tentativas e não consigo abrir o modal. No aguardo de alguma sugestão. Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Por onde você está chamando o modal? Eu dei uma lida rápida no código e não encontrei nenhum link que fizesse referência ao seu ID.

Talvez até mesmo esse seja o seu problema. Vou deixar abaixo como você deve estruturar um modal pra que ele funcione corretamente.

HTML DO MODAL:

<div class="modal fade" id="seuModal" tabindex="-1" role="dialog" aria-labelledby="seuLabel">
   <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"></button>
            <!-- Aqui vai seu conteúdo -->
         </div>
         <div class="modal-body">
            <!-- Aqui vai seu conteúdo -->
         </div>
         <div class="modal-footer">
            <!-- Aqui vai seu conteúdo -->
         </div>
      </div>
   </div>
</div>

Compreenda que seu modal possui um ID que é por onde ele deve ser chamado em um link. Para fazer isso, estruture seu link dessa forma:

HTML DO LINK:

<a data-toggle="modal" data-target="#seuModal"></a>

Simples, ele vai pegar o ID = seuModal (ou qualquer outro nome que você prefira dar) e vai exibí-lo.

Veja se essas dicas funcionam e qualquer coisa só retornar aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

manolegal    12

manolegal
Postado

Olá Hantaroo

Estou chamando o modal da seguinte forma:

<div class="form-group col-md-3">
     <label for="cad_pessoa"></label> 
     <input type="button" class="btn btn-success btn-block" value="Cadastrar Pessoa" data-toggle="modal" data-target="#modal_cad_pessoa" title="Cadastrar">
</div>

Meu modal:

    <!-- Modal -->
<div class="modal fade" id="modal_cad_pessoa" 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">Cadastrar Pessoa</h4>
      </div>
      <div class="modal-body">
          <form method="post"  action="<?php echo $_SERVER['PHP_SELF']; ?>">
                  <div class="row">
                      <div class="col-md-6" form-group >
                        <label for="pessoa_nome">Nome</label>
                        <input class="form-control" type="text" id="pessoa_nome" name="pessoa_nome" autofocus placeholder="Informe o Nome da Pessoa... (Obrigatório)" required maxlength="50" onfocus="mudacor(this,'#DCDCDC')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)">
                      </div>
                  </div> <!-- /row -->    
              
          </form>
          
          
          ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="submit" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

Quando chamo o modal a tela escurece e o modal aparece rapidamente, não permanecendo aberto.

Será que o problema não seria na "lógica das DIVS" dos meus arquivos?

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Manolegal, eu fiz o teste com o seu modal e ele funcionou normalmente. Veja aqui ele em funcionamento: DEMO.

Eu vi que você tem uns 5 scripts de jQuery, não faça isso, senão um pode acabar encerrando o outro e no fim você ficar sem nenhum deles. Deixe somente o mais atual e execute seu modal novamente.

Lembre-se, o bootstrap.min.js é a mesma coisa que o bootstrap.js. O MIN significa que ele foi minificado pra ocupar menos espaço e executar de forma mais rápida. O que você precisa agora é de uma limpa no código.

Ah, não esqueça também que o bootstrap é baseado em jQuery, então coloque-o abaixo do script do jQuery.

Qualquer dúvida, só mandar aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

manolegal    12

manolegal
Postado

Blza Hantaroo

O problema realmente estava nos arquivos .js.

No arquivo funcionarios_cadastro_b deixei somente alguns arquivos e funcionou:

    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-3-3-4.min.js"></script>  
    <script type="text/javascript" src="js/navegar.js"></script>

Obrigado pela disponibilidade em ajudar. Resolvido.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito