Modal Bootstrap 4: How to call another within a modal

Asked

Viewed 3,029 times

1

Guys... I have a registration modal. Since I would like to call another modal, being still inside it. I mean... It would be superimposed on my registration modal.

I’m using the code to call my modal in Bootstrap 4:

<button class="btn btn-outline-secundary my-2 my-sm-0" id="iniciaCadastro" type="button" data-toggle="modal" data-target="#cadastraModal">Cadastre-se</button>

The structure is similar to the one we have in the bootstrap documentation. Using Header, Body and footer.

In the footer, I try to call another modal, with details of terms and conditions.

<a href="#" data-toggle="modal" data-target="#termosModal">Termos de uso</a>

But it seems to me that bootstrap does not support this strategy...

Can someone help me solve this problem?

javascript html css twitter-bootstrap
  • 1

    Bootstrap does not support nested modals. As stated in documentation: "Bootstrap only Supports one modal window at a time. Nested modals aren’t supported as we Believe them to be Poor user Experiences."

2 answers

2


Follows a solution.

$("#modal").click(function() {
  $('#myModal').modal('show');
});

$("#modal2").click(function() {
  $('#myModal2').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" id="modal" class="btn btn-default">Abrir modal</button>


<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" id="modal2" class="btn btn-success">Abrir modal 2</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<div class="modal" id="myModal2">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading 2</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

  • Show! I will try this solution! :)

1

I don’t know if it’s the way you think it is, but the only way it exists is by using the $(element). modal('show') method, you’ll be superimposing modals.

It would look like this:

Button will open the first modal of the common way:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

In the second modal, you will put a class on the button you want to use to open the next modal:

...
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary openModal">Save changes</button>
</div>
...

Now you will open the modal via Javascript with the Bootstrap modal API itself:

$('.openModal').on('click', function(e) {
  $('#exampleModal2').modal('show');
});

In which case, the id of my other modal is exampleModal2

Browser other questions tagged javascript html css twitter-bootstrap

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