Управление окнами на JavaScript

Управление окнами на JavaScript

Здравствуйте! В этом уроке мы с вами раз берем как создаются  окна с помощью объекта window.  Хочу напомнить вам, что мы уже рассматривали функции для взаимодействия с диалоговыми окнами. Это такие функции как alert(), prompt() и confirm(). В этом уроке мы рассмотрим создание всплывающих окон на JavaScript.

Создание всплывающих окон на JavaScript

Открытие, закрытие и позиционирование окон

Объект window предоставляет ряд методов для управления окнами браузера. Так,  есть метод open(), который открывает новую веб-страницу окне браузера:

let popup = window.open('https://google.com', 'Google', 'width=400, height=400, resizable=yes');

Метод open() может принимать ряд параметров: адрес веб-страницы, название для окна и в качестве 3-го параметра набор стилевых значений окна. Метод возвратит ссылку на объект нового окна.

Вы можете задать следующие характеристики:

  • width: ширина окна в пикселях. Например, width=740
  • height: высота окна в пикселях. Например, height=580
  • left: координата X по горизонтали относительно начала экрана в пикселях. Например, left=100
  • top: координата Y по вертикали относительно начала экрана в пикселях. Например, top=100
  • titlebar: будет ли окно иметь строку с заголовком. Например, titlebar=yes
  • menubar: будет ли окно иметь панель меню. Например, menubar=yes
  • toolbar: будет ли окно иметь панели инструментов. Например, toolbar=yes
  • location: будет ли окно иметь адресную строку. Например, location=no
  • scrollbars: допускается ли наличие полос прокрутки у окна. Например, scrollbars=yes
  • status: наличие статусной строки. Например, status=yes
  • resizable: может ли окно изменять размеры. Например, resizable=no

С помощью метода close()  вы можете закрыть окно.  Для примера давайте откроем новое окно и через 10 секунд закроем его:

let popup = window.open('https://google.com', 'Microsoft', 'width=300, height=300, resizable=yes');
setTimeout(function() {
   popup.close();
}, 10000);

А вот метод moveTo() позволяет переместить окно на новую позицию:

var popup = window.open('https://google.com', 'Google', 'width=300, height=300, resizable=yes');
popup.moveTo(150,150);

В данном примере окно переместится на позицию с координатами x=150, y=150 относительно левого верхнего угла экрана.

Читайте также  Работа с историей браузера. Объект history

Метод resizeTo() позволяет вам изменить размеры окна:

let popup = window.open('https://google.com', 'Google', 'width=300, height=300, resizable=yes');
popup.resizeTo(500,350); // 500 - ширина и 350 - высота

ИТОГИ

Для того чтобы  создать новое  всплывающее окно надо вызвать  метод window.open().

Для закрытия окна следует вызвать  метод window.close().

Для перемещения окна используется функция window.moveTo().

Задания

1. Создайте  окно, которое бы само закрывалось через 10 секунд.

2. Сделайте так, чтобы окно появилось через 10 секунд после загрузки страницы.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: