Open a modal with a button in another modal?

Question

Open a modal with a button in another modal?

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I have a modal of bootstrap where it has a button that closes modal but I wanted it to barely close the modal, open another. I already tried to put a id on the button to when clicking to open the modal again but it is not working.

This is what I have

<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 loading a event of FullCalendar , and the other externally.

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

jquery modal bootstrap

asked by anonymous 06.10.2017 / 16:25

2 answers

2

As I understand it, if it opens a modal, and soon after its closure, it opens another modal, if it is, 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><scriptsrc="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>

06.10.2017 / 16:38

How to insert icons in JSF? Stacking and stacking with queue in javascript

score 2 · Accepted Answer

Make sure that% s of% has 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><scriptsrc="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