Bootstrap - Open modal while another modal is open and keep 'modal-open' class in body

Question

I want to open a new Bootstrap modal when I click a button inside another open modal. It works fine, but the problem is that the 'modal-open' class of the body tag just disappears, and so an scroll for the entire page appears.

When I click the button in the modal, in code-behind I do this:

ScriptManager.RegisterStartupScript(upMain, typeof(UpdatePanel), "Tipo descuento seleccionado", "$('#DtosModal').modal('show'); $('#tipoDtoModal').modal('hide');", true);

What can I do to keep that class in the body tag?

Thank you very much!

EDIT: If I change

$(document)
   .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) 
   .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })

in bootstrap.js for

$(document) 
   .on('show.bs.modal', '.modal', function () { document.body.className += ' modal-open'; }) 
   .on('hidden.bs.modal', '.modal', function () { document.body.className = document.body.className.replace(" modal-open", ""); })

I solve the problem. Any other more 'orthodox' ideas?

Answer 1

Any other more 'orthodox' ideas?

Yes i have, but a very 'orthodox' one : )

// close the modal anyway
$('#' + modalName).modal('hide');
setTimeout(function() {
    // needs to be in a timeout because we wait for BG to leave
    // keep class modal-open to body so users can scroll
    $('body').addClass('modal-open');
}, 400);

I'm working with http://bootboxjs.com/ there the callback only fires just after i pressed the action button. so it does not wait until the background disappeared.

For the Twitter Bootstrap modal seem to be a proper solution for the callback. See here: How to handle the modal closing event in Twitter Bootstrap?