2

Eu tenho um modal do bootstrap onde tem um botão que fecha o modal mas queria que mal fechasse o modal, abrisse outro. Já tentei meter um id no botão para ao clickar abrir o modal de novo mas não está funcionando.

Este é o que tenho

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-footer" style="margin-top:0;">
            <button type="button" class="btn btn-success" id="open">Inscrever-me nesta aula!</button>
                <button type="button" class="btn btn-info" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<div id="fullCalModal2" class="modal fade">
    //Texto complementar com divs
</div>

Para abrir o primeiro modal, eu abro carregando num event do FullCalendar, e o outro externamente.

$("#open").click(function(){
    $("#fullCalModal2").modal();
});
8
  • Por que você não ele abrir o outro modal ao clicar no fechar? Commented 6/10/2017 às 14:31
  • Esse calendar tem o botão fechar com id ou class? Commented 6/10/2017 às 14:32
  • @adventistaam O que supostamente abre outro modal é só se o utilizador se quiser inscrever e o outro é apenas para fechar o modal Commented 6/10/2017 às 14:34
  • @adventistaam No fullCalendar, está assim ` $('#fullCalModal').modal();` Commented 6/10/2017 às 14:35
  • @adventistaam Peço desculpa o código postado estava desatualizado, veja agora Commented 6/10/2017 às 14:37

2 Respostas 2

3

Verifique se no fullCalModal2 tem os botoes identificados? ID ou Class?

Dá uma olhada nesse exemplo:

$('.btn-info').on('click', function(){
  $('#myModal').modal('show');
});

$('.btn-botao').on('click', function(){
  $('#myModal1').modal('show');
});
#myModal:nth-of-type(even) {
    z-index: 1042 !important;
}
#myModal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Principal</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-botao">Abri outro Modal</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


<!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Secundário</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal secundario.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Você pode ver outro exemplo aqui

5
  • Eu não sabia que era assim... legal.
    – novic
    Commented 6/10/2017 às 15:13
  • Assim como? rs. Commented 6/10/2017 às 15:14
  • é para abrir o segundo modal logo em cima? a partir do evento do botão? é isso !!!
    – novic
    Commented 6/10/2017 às 15:15
  • 1
    Bom eu entendi isso rs Commented 6/10/2017 às 15:16
  • 1
    @VirgilioNovic A sua imagem foi a minha reação ao ver o que tinha de errado Commented 6/10/2017 às 15:25
2

Pelo que eu entendi, se abre um modal, e logo após o seu fechamento, abre outro modal, se for isso, resolvi fazer um exemplo:

jQuery(document).ready(function() {
  $("#open").click(function() {
    $("#fullCalModal").modal();
  });
  $("#btnopen").on('click', function (e) {
    $("#fullCalModal2").modal();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="fullCalModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-footer" style="margin-top:0;">
        <button type="button" id="btnopen" class="btn btn-success" data-dismiss="modal">Inscrever-me nesta aula!</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<div id="fullCalModal2" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-footer" style="margin-top:0;">       
        <button type="button" class="btn btn-info" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-success" id="open">Abrir Modal</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .