FullScreenModal

by Yogesh Kanthale

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio neque, mollis ullamcorper venenatis quis, pharetra eu turpis. Aenean molestie mattis egestas. Donec at arcu ultrices, ullamcorper felis sed, convallis nunc. Proin faucibus viverra luctus. Etiam interdum iaculis urna. Nam quis ex at massa condimentum mattis quis semper purus. Morbi ac ipsum quis purus ullamcorper lacinia eu nec orci. Nam convallis purus laoreet purus convallis, sit amet aliquam odio pharetra. Pellentesque sollicitudin lacus at justo iaculis semper. Duis et est mattis, sagittis felis at, porta dui. Praesent scelerisque dolor in pulvinar blandit. Donec venenatis diam sem, ac venenatis ligula tincidunt ac. Donec vestibulum imperdiet lorem, non commodo massa finibus et. In dignissim ligula elit, et laoreet augue porttitor sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt, justo sit amet egestas aliquam, ante eros fermentum tellus, vel condimentum erat ipsum eget felis. Vestibulum ultrices sit amet risus et varius. Vestibulum varius ipsum in pellentesque auctor. Nulla eu suscipit ipsum. In nisi augue, bibendum eget nulla et, hendrerit...

CSS

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}