В статье вы узнаете как можно просто по клику создать олноэкранное окно при помощи JavaScript. Полноэкранный API позволяет просматривать веб-страницу или элемент HTML в полноэкранном режиме и скрывать весь пользовательский интерфейс браузера и другие приложения от экрана окна. Вы можете использовать этот API, чтобы привлечь внимание пользователей к изображениям, видео и другому контенту.
Вы можете перейти в полноэкранный режим двумя способами. Вы можете просто открыть окно в полноэкранном режиме, нажав клавишу F11 или настроить кнопку, или ссылку, которая откроет окно в полноэкранном режиме.
Полноэкранный режим — это режим, в котором документ или элемент отображается на всем экране устройства. Полноэкранный режим лучше всего подходит для элементов видео, элементов iframe, галерей слайд-шоу.
HTML
Код
<div id="element_wrapper">
<label>Узнайте, как сделать полноэкранное окно с JavaScript</label>
<button id="button">Включить полный экран</button>
</div>
CSS
Код
#element_wrapper {
margin: auto;
height: 100%;
width: 50%;
background-color: #e2f9d0;
font-size: 24px;
text-align: center;
padding-top: 50px;
}
#button {
width: 200px;
display: block;
margin: 60px auto;
background: #16425D;
color: #fff;
border: 1px solid #16425D;
padding: 10px;
cursor: pointer;
}
#element_wrapper:-ms-fullscreen {
background-color: #e7ffc0;
margin: 0;
}
#element_wrapper:-webkit-full-screen {
width: 100%;
height: 100%;
background-color: pink;
margin: 0;
}
#element_wrapper:fullscreen {
background-color: #e7ffc0;
margin: 0;
}
#element_wrapper:-moz-full-screen {
background-color: #e7ffc0;
margin: 0;
}
JAVASCRIPT
Код
function Fullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
$("#button").on('click', function() {
Fullscreen($("#element_wrapper").get(0));
});
$(document).on('fullscreenchange MSFullscreenChange mozfullscreenchange webkitfullscreenchange', function() {
var full_screen_element_check = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element_check != null){
$("#button").hide(); // If full screen is enabled
}else{
$("#button").show(); // If full screen is disabled
}
});
Также нужно подключить библиотеку, для того, чтоб все корректно работало.
Демонстрация
