单击一个按钮使div'全屏'？

Question

我有一个div,我想全屏(窗口大小的100%宽度/高度)onClick一个单独的按钮,图像或链接.我将如何使用Javascript/jQuery进行此操作？

Answer 1

有一个HTML5全屏API,但它不足以支持生产.

你可以试试这个:

$('#theButton').click(function() {
    $('#theDiv').css({
        position: 'fixed',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        zIndex: 999
    });
});

Answer 2

您可以使用以下功能使任何 div 全屏

    function goFullScreen(){

        var elem = document.getElementById(temp);

        if(elem.requestFullscreen){
            elem.requestFullscreen();
        }
        else if(elem.mozRequestFullScreen){
            elem.mozRequestFullScreen();
        }
        else if(elem.webkitRequestFullscreen){
            elem.webkitRequestFullscreen();
        }
        else if(elem.msRequestFullscreen){
            elem.msRequestFullscreen();
        }
    }

要退出全屏，您可以使用以下功能

       function exitFullScreen(){

            if(document.exitFullscreen){
                document.exitFullscreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.webkitExitFullscreen){
                document.webkitExitFullscreen();
            }
            else if(document.msExitFullscreen){
                document.msExitFullscreen();
            }

        }

该代码适用于任何浏览器。