Close a modal BOOSTRAP and open another one then?

Asked

Viewed 625 times

-1

1: I would like, in my registration modal, to click on the link "Already have account? LOGIN" the registration modal if you close and open the login modal, since the bootstrap does not allow 2 open modals. Is there a command to do this ? (img)

inserir a descrição da imagem aqui

2: When clicking on the button "log in", there is a search in the database and, if there is the user, the configuration div (data, address, etc), but the login div remains open, what to do? (img2)

inserir a descrição da imagem aqui

bootstrap-3

  • I used the "$("#login" function). modal('Hide')", but the modal is gone, but the screen is still dark and the body is disabled, as shown in the image: https://i.imgur.com/R80itll.png

  • I used the "$("#login"). modal('Hide');" function followed by "$('.modal-backdrop'). css('display', 'None');" and it worked, but the animation is very slow,

  • Look, I wouldn’t have to close the first one and open the second in sequence?

  • You want to click on "Login" inside the modal "Register" this modal closes? I could not understand right...

  • Edward is what I’m trying to do

  • Hugo in the first image I said that when you click on "Do you have an account? Login" close the registration modal and open the Login modal. .

Show 1 more comment

1 answer

1

When closing the modal with $("#login").modal('hide'), use the event callback hidden.bs.modal to open the other with $("#cadastro").modal('show');.

Note that Bootstrap 3 only works with jQuery from version 1.9.1 and less than 3.0.

Take an example:

$("#fazer_cadastro").on("click", function(e){
   e.preventDefault();
   $("#login").modal('hide').on('hidden.bs.modal', function(){
      $("#cadastro").modal('show');
   })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login">Login</button>
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Login</h4>
      </div>
      <div class="modal-body">
        <a href="#" id="fazer_cadastro">Fazer cadastro</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="cadastro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Cadastro</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

  • Sam, first of all, thanks for your help. I created a new html, a new JS, just to test your code, and it didn’t work, but in your example it is working perfectly. Note: I copied exactly your code, and the only change was to enter my javascript. You know what the problem might be?

Browser other questions tagged bootstrap-3

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