3

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?

Lorenzo Morillas
  • 33
  • 1
  • 6

3 Answers3

6

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?

Community
  • 1
  • 1
Kurt Lagerbier
  • 170
  • 2
  • 11
2

The solution for bootstrap it would be: (La solución para bootstrap sería:)

$('#nameOfModal').on('hidden.bs.modal', function () {
    $('body').addClass('modal-open');
});
J. Damián
  • 21
  • 1
1

Use the event shown.bs.modal

$('#DtosModal').on('shown.bs.modal', function(){
  $('body').addClass('modal-open');
})

Be careful to use shown.bs.modal and not show.bs.modal.

Alexandru Burca
  • 427
  • 1
  • 4
  • 15