Jump to content
Gilberto Jr

data-dismiss="modal"

Recommended Posts

Boa tarde;

 

Eu estou com um probleminha aqui que eu não consegui resolver.

 

O que eu quero, eu tenho uma pagina com 2 modal.

 

Um modal dentro do outro.

Exemplo: 

Quando eu abro um MODAL, eu tenho uma botão para abrir um novo modal. Ele abre certinho, porem na hora de fechar. Eu clico no botão fechar, ele fecha os dois MODAL.

 

E eu quero fechar somente o segundo modal que abre.

 

Abaixo segue o meu codigo.

 

<div class="modal fade" id="ListagemRede" 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 font-weight-bold" id="exampleModalLabel">LISTA DE REDES CADASTRADAS</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table text-center">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Nome Rede</th>
              <th scope="col">Ação</th>
            </tr>
          </thead>
          <tbody>
            <tr>            
              <th scope="row">1</th>
              <td>Rede 1</td>
              <td>
              	<i class="fa fa-pencil fa-2x" style="color:#FB8A52;" data-toggle="modal" data-target="#EditarRede<%=r("id")%>"></i>
                
				<!-- Modal Editar a Rede -->
                <div class="modal fade" id="EditarRede<%=r("id")%>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                      <div class="modal-body">
                            <form method="post" action="insere_rede.asp" id="forcadrede">
                              <div class="form-row">
                                <div class="form-group col-md-4">
                                <input type="hidden" name="master" value="1" required>
                                  <label for="inputEmail4" class="font-weight-bold">*Nome Rede</label>
                                  <input type="text" name="nome" class="form-control blocochamada text-center" id="inputEmail4" placeholder="*Nome da Rede" autocomplete="off" required>
                                </div>
                               <div class="form-group col-md-4">
                                  <label for="inputEstado" class="font-weight-bold">*Grupo Coord.</label>
                                  <select id="inputEstado" name="coorden" class="form-control blocochamada text-center" autocomplete="off" required>
                                  <%
                                    set rscoord = conn.execute("select * from Inv_coord_grupo")
                                  %>
                                    <option selected>Escolher...</option>
                                    <%
                                        while rscoord.eof = false
                                    %>
                                    <option value="<%=rscoord("id")%>"><%=rscoord("nome_coordenador")%></option>
                                    <%
                                        rscoord.movenext
                                        wend
                                    %>
                                  </select>
                                </div>                 
                                <div class="form-group col-md-4">
                                  <label for="inputCEP" class="font-weight-bold">*Contrato Qtde</label>
                                  <input type="number" name="contratoqtde" class="form-control blocochamada text-center" id="inputCEP" placeholder="Contrato Qtde" autocomplete="off" required>
                                </div>
                              </div>
                              <div class="form-row">
                                <div class="form-group col-md-4">
                                  <label for="inputEmail4" class="font-weight-bold">*Valor Contrato</label>
                                  <input type="text" name="vlrcontrato" class="form-control blocochamada text-center" id="vlrContrato" placeholder="*Valor Contrato" autocomplete="off" required>
                                </div>
                                <div class="form-group col-md-4">
                                  <label for="inputCEP" class="font-weight-bold">*Valor Cont. Adici.</label>
                                  <input type="text" name="vlrcontadici" class="form-control blocochamada text-center" id="vlrContAdicion" placeholder="Valor Cont. Adici." autocomplete="off" required>
                                </div>
                                <div class="form-group col-md-4">
                                  <label for="inputEstado" class="font-weight-bold">*Status</label>
                                  <select id="inputEstado" name="status" class="form-control blocochamada text-center" autocomplete="off" required>
                                    <option selected>Escolher...</option>
                                    <option value="1">Ativo</option>
                                    <option value="0">Desativado</option>
                                  </select>
                                </div>    
                              </div>  
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary btnfechar" data-dismiss="modal">Fechar</button>
                                    <button type="submit" class="btn btn-primary btnsubmit">Salvar</button>
                                  </div>
                            </form>
                
                      </div>
                    </div>
                  </div>
                </div>
              </td>            
            </tr>              
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

Quem puder me ajudar.

 

Att;

Gilberto Jr

Share this post


Link to post
Share on other sites

@Gilberto Jr

Beleza cara, bom solução poderia tenta usar o atributo data-target como exemplo abaixo.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

  <!-- Modal -->
  <div class="modal fade teste" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
          <button type="button" class="btn btn-default" data-dismiss="modal" data-target="#myModal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade teste" id="myModal2" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
        
          <button type="button" class="btn btn-default" data-dismiss="modal" data-target="#myModal">Close</button>
        </div>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

 

Share this post


Link to post
Share on other sites
22 horas atrás, Marcos_imasters disse:

@Gilberto Jr

Beleza cara, bom solução poderia tenta usar o atributo data-target como exemplo abaixo.

 


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

  <!-- Modal -->
  <div class="modal fade teste" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
          <button type="button" class="btn btn-default" data-dismiss="modal" data-target="#myModal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade teste" id="myModal2" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
        
          <button type="button" class="btn btn-default" data-dismiss="modal" data-target="#myModal">Close</button>
        </div>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

 

 

Olá, boa tarde.
Obrigado pela solução.

 

Att;

Gilberto Jr

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By manolegal
      Boa tarde
      Gostaria de colocar o valor de um campo bootstrap/vue.js em uma variável php, porém não estou conseguindo. É a primeira vez que estou trabalhando com vue.
      O campo está trazendo o valor correto:
      <section class="scans"> <h2>Scans</h2> <ul v-if="scans.length === 0"> <li class="empty">No scans yet</li> </ul> <transition-group name="scans" tag="ul"> <li v-for="scan in scans" key="scan.date" title="scan.content">{{ scan.content }}</li> </transition-group> </section> var app = new Vue({ el: '#app', data: { scanner: null, activeCameraId: null, cameras: [], scans: [] }, mounted: function () { var self = this; self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 }); self.scanner.addListener('scan', function (content, image) { var element = document.getElementById('valor'); element.innerHTML = content self.scans.unshift({ date: +(Date.now()), content: content }); }); Instascan.Camera.getCameras().then(function (cameras) { self.cameras = cameras; if (cameras.length > 0) { self.activeCameraId = cameras[1].id; self.scanner.start(cameras[1]); } else { console.error('Nenhuma Câmera conectada. Verifique!'); } }).catch(function (e) { console.error(e); }); }, methods: { formatName: function (name) { return name || '(unknown)'; }, selectCamera: function (camera) { this.activeCameraId = camera.id; this.scanner.start(camera); } } }); Preciso pegar o valor escaneado constante no campo, para passar para próximo formulário. No aguardo.
    • By joicitias
      Bom dia, 
      Ainda sou novata na área e estou criando um site com Bootstrap , JavaScript , e gostaria de uma ajuda. Crie alertas no form com o booststrap notify, entretanto a notificação de obrigatório aparece no topo da página e eu gostaria que ela aparecesse ao lado do campo. Como posso fazer isso?  


    • By proflupin
      criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro.
      A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While?
      Código:
       
      <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>  
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By xdxddxd
      Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique.
      se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido.
      estou usando o accordion padrão do bootstrap 4+
      Clique neste: Exemplo
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.