• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать полноэкранное окно с JavaScript (Как самостоятельно создать полноэкранному окно JavaScript)
Сделать полноэкранное окно с JavaScript
Kosten
Дата: Пятница, 2019-09-13, 22:07 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25228
Награды: 57


В статье вы узнаете как можно просто по клику создать олноэкранное окно при помощи 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
    }
    
});

Также нужно подключить библиотеку, для того, чтоб все корректно работало.

Демонстрация
Страна: (RU)
-SAM-
Дата: Суббота, 2019-09-14, 10:53 | Сообщение 2
Оффлайн
Заблокированные
Сообщений:602
Награды: 26


Цитата Kosten ()
Также нужно подключить библиотеку, для того, чтоб все корректно работало.
Это у кого сайт не на uCoz, если что:
Цитата Kosten ()
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Суббота, 2019-09-14, 10:54
Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать полноэкранное окно с JavaScript (Как самостоятельно создать полноэкранному окно JavaScript)
  • Страница 1 из 1
  • 1
Поиск: