切换全屏并删除样式

时间:2018-09-24 02:53:30

标签: javascript jquery

按下按钮时,我试图切换到全屏显示。当窗口弹出时,我创建了一些其他样式,但是当我尝试使用转义键退出时,样式仍然存在。如果在全屏退出后按退出键,则将删除样式。有没有解决方法。这是我目前拥有的代码

var mainContainer = document.getElementById("mainContainer");

function toggleFullScreen() {
    if (mainContainer.webkitRequestFullscreen) {
        mainContainer.webkitRequestFullscreen();
        mainContainer.style.backgroundColor = "#3D5A80";
        mainContainer.style.paddingTop = "40px";
    }
    $(document).keydown(function (e) {
        if (e.keyCode == 27) {
            mainContainer.style.backgroundColor = null;
        }
    });
}

2 个答案:

答案 0 :(得分:0)

这是玩具的js fiddle

var mainContainer = document.getElementById("mainContainer");


function toggleFullScreen() {
    if (mainContainer.webkitRequestFullscreen) {
        mainContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        mainContainer.style.backgroundColor = "#3D5A80";
        mainContainer.style.paddingTop = "40px";
    }
document.addEventListener('webkitfullscreenchange', exitHandler);
}
    function exitHandler() {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
             mainContainer.style.backgroundColor = null;
        }
    }
$(document).keydown(function (e) {
        if (e.keyCode == 27) {   
					// this is nessecary so far i dont know how to attach event on esc while fullscreen on 
           
        }
    });
$('.button').click(function(){
	toggleFullScreen();
});
#mainContainer{
  height:50vw;
  width:100%;
  background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainContainer'>

</div>
<button class='button'>
FS
</button>

哦,我猜它不支持在 jsfiddle

上全屏播放

到目前为止,当您从全屏播放开始时,我只是附加了一个事件而已

答案 1 :(得分:0)

$month = $this->input->post('month');
if (is_null($month)) {
    echo 'This is ' . $month;
} else {
    echo 'Nothing';
}