Modal made in bootstrap

Question

Modal made in bootstrap

Navigation

#1 by (2 votes)

2

Why my modal is not opening? The page I call below is inside the main.php, where I put the correct include links:

<div class = "conteudo">
    <div class="container-fluid">
        <div align="left" id="inserir">
            <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
                <a href="#myModal"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Inserir</a>
            </button>
        </div>

        <!-- Listar cargos -->
        <legend>Relação de Cargos</legend>
        <?php include "listaUsuario2.php";?>
    </div>
    <!-- Fim listar cargos -->
</div> <!-- FECHA CONTEUDO -->

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">            
        <form id="cadUsuario" action="" method="post">                     
            <label>Nome:</label><input type="text" name="TXT_NOMEX_USUAR" id="TXT_NOMEX_USUAR" />  <br>                   
            <label>Email:</label><input type="text" name="TXT_ENDER_EMAIL" id="TXT_ENDER_EMAIL" />   <br>                  
            <label>Senha:</label> <input type="text" name="TXT_SENHA_USUAR" id="TXT_SENHA_USUAR" />   <br>                       
        </form>             
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
        <button class="btn btn-primary">Salvar mudanças</button>
    </div>
</div>

javascript twitter-bootstrap

asked by anonymous 01.06.2015 / 20:05

1 answer

Change CSS with session and misaligned divs Are hybrid applications safe?

score 2 · Accepted Answer

I think Button is being replaced by <a> , so do the following ...

<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Inserir
</button>

Removing <a> from code and leaving only <button> .

And in its modal, there are also errors. Replace with this:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
    <div class="modal-body">            
        <form id="cadUsuario" action="" method="post">                     
            <label>Nome:</label><input type="text" name="TXT_NOMEX_USUAR" id="TXT_NOMEX_USUAR" />  <br>                   
            <label>Email:</label><input type="text" name="TXT_ENDER_EMAIL" id="TXT_ENDER_EMAIL" />   <br>                  
            <label>Senha:</label> <input type="text" name="TXT_SENHA_USUAR" id="TXT_SENHA_USUAR" />   <br>                       
        </form>             
    </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>