(function ($) { // Adding a new test to the jQuery support object $.support.fullscreen = supportFullScreen(); // Creating the plugin $.fn.fullScreen = function (props) { if (!$.support.fullscreen || this.length != 1) { // The plugin can be called only // on one element at a time return this; } if (fullScreenStatus()) { // if we are already in fullscreen, exit cancelFullScreen(); return this; } // You can potentially pas two arguments a color // for the background and a callback function var options = $.extend({ 'background': '#111', 'callback': function () {} }, props); // This temporary div is the element that is // actually going to be enlarged in full screen var fs = $('<div>', { 'css': { 'overflow-y': 'auto', 'background': options.background, 'width': '100%', 'height': '100%', 'align': 'center' } }); var elem = this; // You can use the .fullScreen class to // apply styling to your element elem.addClass('fullScreen'); // Inserting our element in the temporary // div, after which we zoom it in fullscreen fs.insertBefore(elem); fs.append(elem); requestFullScreen(fs.get(0)); fs.click(function (e) { if (e.target == this) { // If the black bar was clicked cancelFullScreen(); } }); elem.cancel = function () { cancelFullScreen(); return elem; }; onFullScreenEvent(function (fullScreen) { if (!fullScreen) { // We have exited full screen. // Remove the class and destroy // the temporary div elem.removeClass('fullScreen').insertBefore(fs); fs.remove(); } // Calling the user supplied callback options.callback(fullScreen); }); return elem; }; // These helper functions available only to our plugin scope. function supportFullScreen() { var doc = document.documentElement; return ('requestFullscreen' in doc) || ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) || ('webkitRequestFullScreen' in doc); } function requestFullScreen(elem) { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } } function fullScreenStatus() { return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen; } function cancelFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } function onFullScreenEvent(callback) { $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () { // The full screen status is automatically // passed to our callback as an argument. callback(fullScreenStatus()); }); } })(jQuery);
myJS.js
$(function () { $("#btn").click(function () { $("#cont").fullScreen(); }) });