Search code examples
jqueryruby-on-railstwitter-bootstrapdevise

Switch Between Bootstrap Modals

I have setup my rails 4 app to run with bootstrap 3 and devise.

I have customised the devise sign up and sign in views so that they are now inside bootstrap modals. However, despite using the shared items, which includes a "Not a member? sign up here" link, it doesn't appear in the login modal.

When I copy and paste that code directly in the modal, the register modal is displayed within the login modal. The buttons don't work and it looks awful.

Does anyone know how to create a link, for example "Not a member? sign up here" that will cause the login modal to close and the register modal to open?

Thank you.

Solution

  • If you look at bootstraps modal and scroll down to its methods option. You can see how to manually hide and show a modal by js.

    Does anyone know how to create a link, for example "Not a member? sign up here" that will cause the login modal to close and the register modal to open?

    Fix:

    First of all you need to make sure that the html of both register modal and login modal are present in your page so that they both can be called up (I'm not sure but for this you may have to override devise methods but as your question is about hiding and showing modal so i wont go there).

    Your link can be something like:

    <%= link_to "Not a member? sign up here", class: "new_user" %>

    and your js will look like this:

    $(document).on("click",".new_user",function(){
  $('#id_of_sign_in_modal').modal('hide');
  $('#id_of_sign_up_modal').modal('show');
});