Printing A Data Inside A Modal - php

Question

When I hit the View button, that modal will pop-up. The modal contains details to be printed. Can you please help what should I do with it? Thank you in advance.
This will be the pop-up modal when I hit the view button.
The code below was used for the view button:
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Work Request</h4>
</div>
<div class="modal-body" id="request_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
And the script for the View Button:
$(document).on('click', '.view_data', function(){
var request_id = $(this).attr("id");
if(request_id != '')
{
$.ajax({
url:"select.php",
method:"POST",
data:{request_id:request_id},
success:function(data){
$('#request_detail').html(data);
$('#dataModal').modal('show');
}
});
}
});
This one is for the Print button:
<script>
$().ready(function () {
$('.modal.printable').on('shown.bs.modal', function () {
$('.modal-dialog', this).addClass('focused');
$('body').addClass('modalprinter');
if ($(this).hasClass('autoprint')) {
window.print();
}
}).on('hidden.bs.modal', function () {
$('.modal-dialog', this).removeClass('focused');
$('body').removeClass('modalprinter');
});
});
When I hit the Print the button, it's working but, (just look at the photo): This is the result of clicking the Print button.