If you’re anything like I am then let me apologize for that right now. That said, if you’re anything like I am then you probably like Bootstrap a lot. It’s clean, easy to use, looks good and saves an assload of time.
I also really like Bootstrap’s modals. I am a big fan of being able to present information or forms without having to redirect the user to another page. One request I frequently get is the ability to view the modal in ‘full-screen’ mode. Obviously, as of Bootstrap 3, that is not a built-in option. So I made it one.
The basic concept is pretty simple:
- We create a CSS class called .modal-fs (following the Bootstrap class naming structure: modal-lg, modal-dialog, etc).
- We make a button in the header of the modal using Bootstraps Glyphicons to trigger the Full-Screen function.
- We add the jQuery function.
- Done.
You can download the source files here.
You can view a demo here.
Check out Bootstrap here
See a JS Fiddle of this demo here
Here’s our HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap FS Modal Example</title>
<!-- Bootstrap CSS and Custom style sheet-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="FSmodal.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal -->
<div class="row" style="text-align:center;">
<button type="button" class="btn btn-primary btn-lg launchModalBtn" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p style="text-indent:1em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat gravida eleifend. Duis dui lacus, ullamcorper eu finibus nec, scelerisque in metus. Quisque imperdiet porttitor nisi, vel tempus ex. Duis nec enim tortor. Aliquam et sapien vitae
enim egestas ornare eget in elit. Fusce vitae risus at sem congue iaculis at sit amet nibh. Nulla quis elementum tortor. Curabitur sed scelerisque lectus. Morbi quis turpis dolor. Morbi porttitor auctor nisi, vitae cursus tortor. Proin molestie
congue blandit. Praesent pulvinar, ante eu commodo gravida, ante orci maximus diam, sit amet viverra enim ex a orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst.
</p>
</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>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
As you can see, we just create a simple Bootstrap page with a modal trigger button and a modal and link our various CSS / JS files.
Here’s the CSS:
(this is referenced as FSmodal.css in the header of our HTML)
html,
body {
width: 100%;
height: 100%;
}
.launchModalBtn {
margin: 20% auto;
}
.linklessA {
cursor: pointer;
text-decoration: none;
}
.modal-fs {
margin: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
}
div.modal-fs > div.modal-content {
margin: 0;
width: 100%;
height: 100%;
overflow: scroll;
min-height: 100%;
padding: 0;
}
div.modal-fs > div.modal-content > div.modal-footer {
width: 100%;
position: absolute;
bottom: 0;
}
Pretty straight-forward. You can delete the html, body and .launchModalBtn classes if you want, they’re just for the spacing of the modal trigger button. The class .modal-fs is the one that we’ll be applying to the modal itself. The function for this is incredibly simple. Segue to…
The jQuery:
<script>
$(document).ready(function(e) {
//replace the 'close' button with an 'expand' button- I'm using Bootstraps glyphicons but use whatever you want
$('<a class="linklessA FSModal" style="float:right;"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a>').insertBefore("div.modal-header button.close");
$("div.modal-header button.close").remove();
//apply the on click function
$(".FSModal").on('click', function() {
$(this).find('span').toggleClass('glyphicon-resize-full glyphicon-resize-small')
$(this).closest("div.modal-dialog").toggleClass('modal-fs');
});//end on .FSModal click
});//end on doc ready
</script>
Here we remove the ‘close’ button from the top right of the modal window and replace with a full-size toggle button. The reason I did this programmatically instead of just deleting the button and replacing it in my HTML is that this is a quick way to apply this FS functionality to ALL modals across ALL your pages by just saving this script in a js file called something like ‘fsmodal.js’ and linking it on your pages. Alternatively, you can copy-paste it below your jQuery and Bootstrap JS calls at the bottom of your document.
Next, we add the function that simply toggles the modal-fs class and toggles the icon from the ‘full-size’ icon to the ‘resize’ icon.
And that’s about it. You can go crazy with it and if you modify to do some cool stuff please let me know so I can see what people are doing with it.
Thanks for reading.