<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> Ceci n'est qu'un exemple d'un pop-up d'affichage d'un tableau d'historique afin que vous aurez une idée sur l'utilité des pop-up </br> <a data-toggle="modal" href="#shortModal" class="btn btn-primary">Consulter l'historique</a> <div id="normalModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <iframe frameborder="0" scrolling="no" width="700" height="700" src="http://google.about.com/b/2013/04/01/google-nose.htm"> </iframe> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="tallModal" class="modal modal-wide fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <iframe frameborder="0" scrolling="no" width="700" height="700" src="http://google.about.com/b/2013/04/01/google-nose.htm"> </iframe> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="shortModal" class="modal modal-wide fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Historique des actions de la demande 001BLC2017</h4> </div> <div class="modal-body"> <table class="table"> <thead> <tr> <th>Date </th> <th>action</th> <th>Nom</th> <th>Prenom</th> <th>Mtricule</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>22/08/2017</td> <td>valider</td> <td>triki</td> <td>awatef</td> <td>100TU1000</td> <td>Seige</td> </tr> <tr> <td>22/08/2017</td> <td>valider</td> <td>ladab</td> <td>maha</td> <td>200TU2000</td> <td>Seige</td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

.modal.modal-wide .modal-dialog { width: 90%; } .modal-wide .modal-body { overflow-y: auto; } .table>thead>tr>th { text-align: center; } /* irrelevant styling */ body { text-align: center; } body p { max-width: 400px; margin: 20px auto; } #tallModal .modal-body p { margin-bottom: 900px }

// when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar $(".modal-wide").on("show.bs.modal", function() { var height = $(window).height() - 200; $(this).find(".modal-body").css("max-height", height); });