CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
aborted
aborted

Reputation: 4541

Focus on Bootstrap modal after switching it with jQuery

I have a modal which links to another modal. I got it to switch to the other one quite easily with jQuery, but the problem is that after the switch there's a scrollbar for the body of the page even though the loaded modal is very small; It's like the focus is in the page body after the modal switch.

This is the code that switches the modals:

$('a#login_resend_activation').click(function(){
    $('#login').modal('hide');
    $('#resend').modal('show');
    return false;
});

Note that a#login_resend_activation is part of the first modal (the one that's being closed).

What's possibly happening that the scrollbar is actually being able to scroll my page body (the back of the modal) while the modal is visible? How do I shift the focus to the present modal?

Upvotes: 0

Views: 279

Answers (1)

Deryck
Deryck

Reputation: 7658

Set your bodys position to fixed and overflow hidden: 

...
$('#resend').modal('show'); 
$('body').css({position: 'fixed', overflow: 'hidden'});

Here's a demo for you I made a while back for someone else.

It's kinda ugly but the point gets across lol

Upvotes: 1

Related Questions