Modal Bootstrap 4: How to call another within a modal

Question

Modal Bootstrap 4: How to call another within a modal

Navigation

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

0

Galera ... I have a modal register. Being that I would like to call another modal, still being inside it. That is ... It would be superimposed on my modal of registration.

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 what we have in the bootstrap documentation. Using Header, Body and Footer.

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

<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 anyone help me solve this problem?

javascript html css twitter-bootstrap

asked by anonymous 18.06.2018 / 18:51

2 answers

Error creating tables with foreign keys HTTP Status 405 - Method Not Allowed in method @DELETE

score 1 · Answer 1

Here's 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><scriptsrc="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>

score 0 · Answer 2

I do not know if it's the way you think, but the only one that exists is using the $ (element) .modal ('show') method, you'll be overlapping modal.

It would look like this:

Button will open the first modal of the common form:

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

You will now open the modal via JavaScript with Bootstrap's own Modals API:

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

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