Как создать модальное диалоговое окно с помощью css и javascript

Как это работает

Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.

• Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , так что вместо этого прокручивается модальное содержимое.
• Клик по модальному «фону» автоматически закрывает модальный.
• Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
• В модальных окнах используется , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении в другой фиксированный элемент.
• Еще раз, из-за есть некоторые предостережения при использовании модальных окон на мобильных устройствах. для получения дополнительной информации.
• Из-за того, как HTML5 определяет свою семантику, не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:

Эффект анимации этого компонента зависит от медиазапроса . См. .

Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.

Настройка cookies

Если вы не хотите, чтобы всплывающее окно выводилось каждый раз при загрузке страницы, тогда используйте cookies. Для этого создадим новый файл с именем popup.js. Он будет содержать весь код JS и JQuery. Сначала добавим в него функции createCookie(), readCookie() и eraseCookie():

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca;
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}

После этого нужно изменить наш код JQuery для HTML всплывающего окна с текстом и поместить его в функцию с именем myPopup():

function myPopup() {
    //Получаем тег A
    var id = $('#modal');
    //Получаем высоту и ширину окна
    var winH = $(window).height();
    var winW = $(window).width();
    //Устанавливаем всплывающее окно по центру
    id.css('top', winH/2-id.height()/2);
    id.css('left', winW/2-id.width()/2);
    //эффект перехода
    id.fadeIn(500);
}

Как видите, мы удалили функцию .click(), так как всплывающее окно не будет управляться внешней функцией. Мы также удалили e.preventDefault(). Следовательно, мы не будем использовать ссылку для вывода модального окна.

После того, как мы добавили эти четыре функции в файл popup.js, нужно добавить последнюю часть кода JQuery, которая будет закрывать всплывающее окно HTML.

//если нажата кнопка закрытия окна
$('.modalwindow .close').click(function (e) {
    //отменяем поведение ссылки
    e.preventDefault();
    $('.modalwindow').fadeOut(500);
});

Все готово. Давайте поэкспериментируем с функциями и сделаем так, чтобы модальное окно показывалось только каждые 7 дней. Для этого создаем переменную с именем popup, которая считывает cookies с именем popup:

// считываем куки 'popup'
var popup = readCookie('popup');

Затем создаем конструкцию if else, чтобы проверить, существуют ли cookies. Если да, то ничего не делаем. Иначе входим в цикл, создаем cookies на 7 дней и выводим всплывающее окно при нажатии на ссылку HTML:

// Проверяем, существуют cookies или нет
if ( popup != 'hide' ) {
    // если не существуют, создаем их на 7 дней
    createCookie('popup','hide','7');
    // выводим модельное окно.
    myPopup();

} // если cookies существуют, ничего не происходит.

Вот и все! Мы реализовали простую систему cookie. Теперь можно удалить следующую часть из HTML-кода, если мы используем куки:

<!-- #modal - это id элемента DIV, определяемый в коде ниже -->
<a href="#modal" name="modal">Simple Modal Window</a>

Вадим Дворниковавтор-переводчик статьи «Create a Simple jQuery Modal Window»

Нет, ну скажите, зачем оно вообще нужно!?

Другим распространенным вариантом использования такого подхода являются окна с сообщениями для входящих на сайт или закрывающих его людей. Такие сообщения появляются один раз или при загрузке страницы, или после нажатия на крестик, который закрывает вкладку.

Также я уверен, что каждый из вас наблюдал картину, когда при нажатии на определенные кнопки на сервисе перед вами выскакивает окно с просьбой о регистрации. После его заполнения данные отправляются на сервер при помощи, например, php и после вам открываются все возможности сервиса.

Не могу промолчать и о третьем способе использования всплывающих окон. Это спам и реклама.

Стилизуем кнопки и модальные окна.

Изображение, которое получится в браузере после стилизации.

У всей секции #types сделаем отступ сверху padding-top: 30px.

Между заголовком h2 и изображениями сделаем отступ margin-bottom: 30px.

Добавим у всей секции, чтобы заголовки были большими буквами text-transform: uppercase.

Заголовки под картинками h3 установим пониже margin-top: 20px и сделаем жирным шрифтом font-weight: bold.

Оформим кнопки подробнее и заказать.

Добавим фиолетовую рамку border: 3px solid #b641b0, когда наводим мышкой &:hover на блок с классом comp и цвет фона внутри сделаем светло-голубым background-color: #dcf4f5.

Чтобы рамка не прилипала зададим отступ пять пикселей padding: 5px.

Код main.sass.

.text-center
text-align: center
.modal-dialog
margin-top: 15%
.modal-header
border-bottom: none
h3
text-transform: uppercase
color: blue
text-align: center
.btn
&:focus
outline: none
.modal-content
border-radius: 0
#types
padding-top: 30px
.section-header
margin-bottom: 30px
section
text-transform: uppercase
h3
margin-top: 20px
font-weight: bold
.btn-more
color: blue
border: 3px solid blue
padding: 10px 8px
background-color: transparent
text-transform: uppercase
transition: all .5s ease
&:hover
background-color: blue
color: #fff
.btn-zakaz
border: 3px solid blue
color: #fff
padding: 10px 18px
background-color: blue
text-transform: uppercase
transition: all .5s ease
&:hover
background-color: #fff
color: blue
border: 3px solid blue
.comp
padding: 5px
&:hover
border: 3px solid #b641b0
background-color: #dcf4f5

Самый простой способ установки всплывающего окна – ссылка

Для того, чтобы на вашем сайте появилось всплывающее (модальное) окно, его предварительно нужно создать, или оно уже должно существовать. То есть вам нужно будет знать ссылку на желаемое всплывающее окно.

Для создания лучше пользоваться отдельным HTML редактором (я пользуюсь DreamWeaver или NotePad++), наполнить страницу необходимым содержимым и сохранить как html файл. Далее загрузить этот файл на свой сайт.

Сам способ по своей структуре – это обычная ссылка с подключением внутри нее JavaScript. Поэтому эту ссылку при редактировании страницы нужно вставлять в режиме HTML в том месте, где Вы ходите чтобы появилась ссылка, при нажатии на которую информация открывается во всплывающем окне.

<a href=»javascript:void(0)» onClick=»javascript:window.open(‘http://Ссылка_на_файл_окна’, ‘okno’, ‘width=845, height=400, status=no, toolbar=no, menubar=no, scrollbars=yes, resizable=yes’);»> Открыть «Мое всплывающее окно»</a>

Вот пример моего кода, примененного на этой странице:

<a href=»javascript:void(0)» onClick=»javascript:window.open(‘https://stepfor.top/Pages/Vsplivaushee_okno.html’, ‘okno’, ‘width=400,height=300,left=250, top=100,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes’);»>
Открыть «Мое всплывающее окно»</a>

А вот собственно и результат Открыть “Мое всплывающее окно”

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800");
*, *:before, *:after {
 box-sizing: border-box;
}

body {
 margin: 50px;
 font-family: 'Open Sans', sans-serif;
 font-size: 14pt;
 color: #333;
 line-height: normal;
 text-align: justify;
 font-smooth: always;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

p {
 margin-top: 50px;
}

a {
 color: dodgerblue;
 text-decoration: none;
}

#overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 350px;
 height: 150px;
 padding: 25px;
 margin: auto;
 border-radius: 5px;
 background: white;
 display: table;
 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
 font-family: 'Open Sans', sans-serif;
 font-size: 12pt;
 color: #333;
 line-height: normal;
 text-align: justify;
 font-smooth: always;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
#overlay p {
 height: 30px;
 display: table-cell;
 vertical-align: middle;
 line-height: 30px;
 text-align: center;
}
#overlay p i {
 cursor: pointer;
 height: 30px;
 padding: 0 10px;
 margin: 0 10px;
 border-radius: 3px;
 background: #ddd;
 display: inline-block;
 box-shadow: 0 2px #bbb;
 color: #999;
}

Как создать и вызвать модальное окно?

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице. Это выполняется программно.

Таким образом, для того чтобы создать его достаточно просто вызвать функцию :

var modal = $modal();

При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ позволяет установить содержимое, а – кнопки для отображения их в его нижней части (футере).

var modal = $modal({
  title: 'Текст заголовка',
  content: '<p>Содержимое модального окна...</p>',
  footerButtons: 
});

Все эти ключи являются не обязательными. Если не указать , то заголовок будет иметь название «Новое окно». Если не установить значению ключу , то модальное окно в этом случае создатся с пустым содержимым.

Ключ в отличие от и принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку. Она задаётся с помощью ключей , , . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов и . Если ключ вообще не указать, то в этом случае модальное окно будет создано без футера.

Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:

var modal = $modal({
  title: 'Текст заголовка'
});  

Пример создания модального окна с настройками по умолчанию:

var modal = $modal();

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

Но функция не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

Для этого нужно создать переменную и присвоить ей результат выполнения функции .

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

• – для отображения модального окна;
• – для скрытия модального окна;
• – для удаления модального окна из DOM и связанных с ним обработчиков событий;
• – для установки контента;
• – для установки заголовка.

Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

Рассмотрим, как работать с этими методами на примерах.

Например, метод используется когда вам необходимо показать (открыть) модальное окно:

modal.show();

Метод применяется для его скрытия:

modal.hide();

Методы и предназначены соответственно для изменения контента и заголовка модального окна после его создания.

modal.setContent('<p>Новое содержимое...</p>');
modal.setTitle('Текст нового заголовка');

В возвращаемом объекте также есть метод . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

modal.destroy();

Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. <a href="#">Quidem natus iure</a>, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, <a href="#">accusamus</a>, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>

Подготовка

В этом разделе я создам отдельную страницу в админ-панели вместе с скрытым  тегом и кнопкой, которая открывает модальное окно. Особо подробных инструкций не будет, так как тема статьи у нас другая.

Читать и повторять все в точности как у меня не обязательно, но лучше ознакомьтесь, чтобы далее было понимание контекста статьи.

Страница

В админ-панели пройдите по пути «Development > Navigation > Admin navigation».

В открывшейся странице кликните по кнопке «Add navigation» и заполните необходимые поля. Вот, что ввел я:

Теперь нам нужно зарегистрировать в xenForo ссылку на нашу тестовую страницу. Идем по пути «Development > Navigation > Routes» и жмем на кнопку «Add route: Admin»:

Теперь надо создать контроллер страницы, который будет загружать шаблон. Создаем файл   по пути  «ADDONID/Admin/Controller/»:

Контроллер готов. Осталось создать шаблон страницы. В админ-панели идем по пути «Appearance > Templates» и создаем админ-шаблон :

Обратите особое внимание на атрибут ! Он должен присутствовать обязательно, так как в противном случае никакого модального окна не будет. Взамен текущей страницы просто откроется новая, а нам этого не надо

Со страницей закончили. У нас есть скрытое поле и кнопка, которая открывает модальное окно. Им сейчас и займемся.

Модальное окно

В нашем контроллере  нужно создать новый метод :

Создаем админ-шаблон :

Вот так модальное окно выглядит у меня:

Ну вот и все!
Подготовка завершена!

JS

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
var input = '<p>Нажмите <i>esc</i> для закрытия.';
$(function(){
 $('body').css({ overflow: 'hidden', 'pointer-events': 'none' });
 $('html').append('<div id="overlay">' + input +'</div>');
 $('html').keydown(function(e){
 if ( e.keyCode == 27 ) {
 $('body').css({ overflow: 'auto', 'pointer-events': 'auto' });
 $('#overlay').fadeOut(300);
 }
 console.log(e);
 });
 var e = $.Event('keydown',{keyCode: 27});
 $('#overlay i').on('click',function(){
 $('html').trigger(e);
 });
});
</script>

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу нужно добавить CSS-свойство со значением . А после скрытия модального окна данное свойство убрать у элемента . Данное действие можно осуществить только с помощью JavaScript:

document.addEventListener("DOMContentLoaded", function(){
  var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
  console.log(scrollbar);
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'hidden';
    document.querySelector('#openModal').style.marginLeft = scrollbar;
  });
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'visible';
    document.querySelector('#openModal').style.marginLeft = '0px';
  });
});

Возможности JavaScript

В скриптовом языке встроено множество возможностей создавать всплывающие окна. Так, попапы можно вызвать при помощи стандартных функций alert, confirm и prompt.

Alert выводит простое сообщение пользователю. В прошлых публикациях я много раз использовал этот метод. Закрыть такое окно можно нажав крестик или «OK». Синтаксис выглядит следующим образом:

Confirm необходим для задания вопроса пользователям. Такое окошко часто можно встретить при выходе с сайта или проверке какой-либо информации о вас. К примеру:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <script>
    var text = confirm("Какой-то текстовый контент. Вы все прочли?");
  </script>
</head>
<body>
</body>
</html>

Если в появившееся окно стандартного вида можно ввести какую-то информацию, то это prompt.

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<body>
  <script>
   var isLogIn= prompt('Вы подписчик?', '');
alert('Ответ: '+isLogIn);
  </script>
</body>
</html>

Помимо этого, в js у window существует метод, который позволяет загружать новые страницы и открывать новые окна. Это

Данный метод обладает множеством встроенных параметров. Если есть желание их разобрать, то откройте официальную документацию. А я перейду сразу к простому примеру.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> window on js</title>
</head>
<body>
  <script>
    var PopUpW = window.open("", "PopUp Window", "resizable=no,scrollbars=no,width=350,height=150,copyhistory=1");
    PopUpW.document.write("Много-много текстового контента!");
  </script>  
</body>
</html>

Благодаря такому коду всплывающее окно будет появляться сразу после загрузки страницы. Заметьте, что параметры нужно перечислять через запятую и обязательно без пробелов.