<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
@media print {
body * {
visibility: hidden;
}
.modal-content * {
visibility: visible;
overflow: visible;
}
.main-page * {
display: none;
}
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
min-height: 550px;
visibility: visible;
overflow: visible !important; /* Remove scrollbar for printing. */
}
.modal-dialog {
visibility: visible !important;
overflow: visible !important; /* Remove scrollbar for printing. */
}
}
</style>
</head>
<body>
<div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="javascript:window.print()" class="btn btn-primary pull-right">Print</a>
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<?php for( $i = 1; $i <= 20; $i++ ): ?>
<li><a href="#"><?php echo 'Item ' . $i; ?></a></li>
<?php endfor; ?>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
<div class="container main-page">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#myModal">Open Modal</a>
<ul>
<?php for( $i = 1; $i <= 100; $i++ ): ?>
<li><a href="#"><?php echo 'Item ' . $i; ?></a></li>
<?php endfor; ?>
</ul>
</div>
</div>
</body>
</html>
