Twitter Bootstrap: Print content of modal window

Question

I\'m developing a site using Bootstrap which has 28 modal windows with information on different products. I want to be able to print the information in an open modal window.

Answer 1

I just use a bit of jQuery/javascript:

html:

Don't Print

Launch modal


  

    ×
     
Modal to print
  
  

    
Print Me
  
  

    Close
    Print
  

js:

$('#printButton').on('click', function () {
    if ($('.modal').is(':visible')) {
        var modalId = $(event.target).closest('.modal').attr('id');
        $('body').css('visibility', 'hidden');
        $("#" + modalId).css('visibility', 'visible');
        $('#' + modalId).removeClass('modal');
        window.print();
        $('body').css('visibility', 'visible');
        $('#' + modalId).addClass('modal');
    } else {
        window.print();
    }
});

here is the fiddle