Modal made in bootstrap

Question

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

<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>

Answer 1

I think Button’s being replaced by <a>, then 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>

Apart from the <a> of the code and leaving only the <button>.

And in your 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>