Bootstrap 3.0 Modal Demo

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">...</div>
        </div>
    </div>
</div>
<div>
    <button type="submit" class="btn btn-primary btn-lg generate_report">Report</button>

JavaScript

$('#myModal').modal('hide');
$(document).ajaxStart(function () {
    $('#myModal').modal('show');
}).ajaxStop(function () {
    $('#myModal').modal('hide');
});


$(".generate_report").click(function (event) {
    event.preventDefault();

    $.post("xls.php", $(".form_report").serialize())
        .done(function (data) {
        alert("after modal");
    });
});