Open a modal with a button in another modal?

Asked

Viewed 2,878 times

2

I have a modal of bootstrap where there is a button that closes the modal but I wanted as soon as I closed the modal, to open another. I tried to put one id button to open the modal again but it is not working.

This is what I got

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

To open the first modal, I open by clicking on a event of FullCalendar, and the other externally.

$("#open").click(function(){
    $("#fullCalModal2").modal();
});
jquery bootstrap modal

  • Why don’t you open the other modal by clicking on the close?

  • This Calendar has the close button with id or class?

  • @adventistaam What supposedly opens another modal is only if the user wants to sign up and the other is just to close the modal

  • @adventistaam In fullCalendar, it’s like this $('#fullCalModal').modal();

  • @adventistaam I’m sorry the code posted was outdated, see now

  • in the fullCalModal2 have the buttons identified? ID or Class?

  • @adventistaam You’re right, it was just a mistake. There were two buttons with the same id and I was always changing the wrong button. Post your answer that you are correct.

  • @I_like_trains is to open the second modal from the event click some button, or after closing the first opens the second?

Show 3 more comments

2 answers

3


Check whether in the fullCalModal2 have the buttons identified? ID or Class?

Take a look at this example:

$('.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>

You can see another example here

  • I didn’t know it was so... cool.

  • So how? rs.

  • is to open the second modal right up? from the button event? is that it !!!

  • 1

    Well I understood it rs

  • 1

    @Virgilionovic Your image was my reaction to see what was wrong

2

From what I understand, a modal opens, and soon after its closure, opens another modal, if this is it, I decided to make an example:

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>

Browser other questions tagged jquery bootstrap modal

You are not signed in. Login or sign up in order to post.