1$('#toggle_fullscreen').on('click', function(){
2 // if already full screen; exit
3 // else go fullscreen
4 if (
5 document.fullscreenElement ||
6 document.webkitFullscreenElement ||
7 document.mozFullScreenElement ||
8 document.msFullscreenElement
9 ) {
10 if (document.exitFullscreen) {
11 document.exitFullscreen();
12 } else if (document.mozCancelFullScreen) {
13 document.mozCancelFullScreen();
14 } else if (document.webkitExitFullscreen) {
15 document.webkitExitFullscreen();
16 } else if (document.msExitFullscreen) {
17 document.msExitFullscreen();
18 }
19 } else {
20 element = $('#container').get(0);
21 if (element.requestFullscreen) {
22 element.requestFullscreen();
23 } else if (element.mozRequestFullScreen) {
24 element.mozRequestFullScreen();
25 } else if (element.webkitRequestFullscreen) {
26 element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
27 } else if (element.msRequestFullscreen) {
28 element.msRequestFullscreen();
29 }
30 }
31});
32#container{
33 border:1px solid red;
34 border-radius: .5em;
35 padding:10px;
36}
37<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
38<div id="container">
39 <p>
40 <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
41 </p>
42 I will be fullscreen, yay!
43</div>
44