Open bootstrap modal in another modal

Question

I have two modal popups.

Sign in form --> Forgot password form

When someone click forgot password. Current modal closed and forgot password modal appears. Works perfectly. But there was a problem. Sometimes, modal-admin class not apply for the new modal(forgot password) So I use this js script and problem now solved.

  $( document ).ready(function() {
    $('.modal').on('hidden.bs.modal', function () {
      setTimeout(function() {
      if($('.modal').hasClass('in')) {
      $('body').addClass('modal-open');
     }}),400 
    });
  });

But when you switch between modals few times, right side scrollbar takes small time to disappear and I can see small movement in the modal window. This happend random times. This is happening without setTimeout also. I can't imagine why this happens. Any idea?

overlapping modals is bad UX. You should consider only changing the content of the first modal. — Dinca Adrian, Mar 23 '18 at 09:20
'hidden.bs.modal' is definitely Bootstrap so you can't say it's your code and that's not a framework.I was just saying it's a bad user exp. having 2 modals overlap. — Dinca Adrian, Mar 23 '18 at 09:26
I mean no react, vuejs. Not overlapping here. First one close and other one appears. — Janath, Mar 23 '18 at 09:27
And what if you want to close the second one? will the first modal appear? — Dinca Adrian, Mar 23 '18 at 09:29

score 0 · Answer 1 · answered Mar 23 '18 at 09:13

0

You can use the hide.bs.modal event instead of hidden.bs.modal event so the body class gets added or removed before the modal itself get hidden. May be you are clicking the another modal before the transition is completed.

answered Mar 23 '18 at 09:13

sethuraman

187
7

Open bootstrap modal in another modal

1 Answers1