Как создать простое модальное окно на CSS

Александр Мальцев
61K
3

Статья, в которой рассмотрим, как сделать адаптивное модальное окно на чистом CSS.

Как создать модальное окно на чистом CSS

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

В большинстве случаев модальное окно создают на JavaScript. Но его можно создать не только с помощью JavaScript, но и посредством только HTML5 и CSS3.

Демо модального окна

Демонстрацию всплывающего окна, работающего только на HTML5 и CSS3, вы можете посмотреть здесь:

Демо модального окна на CSS

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
Модальное окно на чистом CSS

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

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

Комментарии ()

  1. serge r
    3 минуты назад
    Здравствуйте. А как сделать, чтобы нижний край модального окна не «уезжал» за границы видимой области в случае, если много контента?
    1. AA
      21 января 2021, 07:31
      Добрый день, а как можно настроить чтоб модальное окно появлялась автоматом, например у меня есть ajax запрос там к примеру данные всегда выше 600, если будет 500, то сработает модальное окно, можно так настроить?
      1. Анастасия
        19 января 2021, 22:26
        Доброго времени суток
        Я дублирую html блок с разным описанием, но отображается содержание только первого блока. Можете, пожалуйста, подсказать как решить эту проблему?
        Заранее спасибо
        1. Анастасия
          20 января 2021, 10:18
          1. Александр Мальцев
            24 января 2021, 11:09
            Привет!
            Тут нужно просто установить разным модальным окнам разные id:
            <div id="openModal-1" class="modal">...</div>
            <div id="openModal-2" class="modal">...</div>
            <div id="openModal-3" class="modal">...</div>
            После этого указать какая ссылка какое модальное окно должна открывать:
            <a class="button" href="#openModal-1">...</a>
            <a class="button" href="#openModal-2">...</a>
            <a class="button" href="#openModal-3">...</a>
            
            Песочница: открыть пример
        2. Сергей
          31 декабря 2020, 08:44
          Подскажите пожалуйста, как изменить скрипт чтоб он работал не только на главной странице сайта, но и на внутренних. Когда я на внутренней странице открываю окно, то автоматом перехожу на главную. Подскажите как исправить код.
          document.addEventListener('DOMContentLoaded', function () {
            var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
            console.log(scrollbar);
            document.querySelector('[href="#otkrutokno"]').addEventListener('click', function () {
              document.body.style.overflow = 'hidden';
              document.querySelector('#otkrutokno').style.marginLeft = scrollbar;
            });
            document.querySelector('[href="#zakrutokno"]').addEventListener('click', function () {
              document.body.style.overflow = 'visible';
              document.querySelector('#zakrutokno').style.marginLeft = '0px';
            });
          });
          
          1. Александр Мальцев
            31 декабря 2020, 11:24
            Вам необходимо при нажатии на ссылку отменить стандартное действие браузера, т.е. вызвать метод preventDefault:
            document.addEventListener('DOMContentLoaded', function () {
              var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
              document.querySelector('[href="#otkrutokno"]').addEventListener('click', function (e) {
                e.preventDefault();
                document.body.style.overflow = 'hidden';
                document.querySelector('#otkrutokno').style.marginLeft = scrollbar;
              });
              document.querySelector('[href="#zakrutokno"]').addEventListener('click', function (e) {
                e.preventDefault();
                document.body.style.overflow = 'visible';
                document.querySelector('#zakrutokno').style.marginLeft = '0px';
              });
            });
            
            1. Сергей
              31 декабря 2020, 11:41
              Вставил Ваш код и почему то окно вообще перестало открываться(.Спасибо что быстро отвечаете.
              1. Александр Мальцев
                31 декабря 2020, 13:34
                В этом случае вызывать окно следует с помощью JavaScript, либо убирать preventDefault и прописывать полный URL (это у вас из-за того, что в HTML коде имеется атрибут base).
                1. Сергей
                  31 декабря 2020, 14:00
                  Вот прописал полный урл (правильно?) но работает как работал. а атрибут Base нужен для сео?
                  document.addEventListener('DOMContentLoaded', function () {
                    var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
                    console.log(scrollbar);
                    document.querySelector('[href="[[++site_url]]#otkrutokno"]').addEventListener('click', function () {
                      document.body.style.overflow = 'hidden';
                      document.querySelector('[[++site_url]]#otkrutokno').style.marginLeft = scrollbar;
                    });
                    document.querySelector('[href="#zakrutokno"]').addEventListener('click', function () {
                      document.body.style.overflow = 'visible';
                      document.querySelector('#zakrutokno').style.marginLeft = '0px';
                    });
                  });
                  1. Александр Мальцев
                    02 января 2021, 08:37
                    Здесь тогда нужно прописывать полный путь к странице, а не [[++site_url]].
                    Второй вариант — это сделать через JavaScript, как предлагал выше (открыть пример).
                    Для этого в CSS вставляем следующее правило:
                    .modal.open {
                      opacity: 1;
                      pointer-events: auto;
                      overflow-y: auto;
                    }
                    
                    В JavaScript добавляем класс «open» при нажатии на ссылку и удаляем его при нажатии на кнопку «Закрыть»:
                    document.addEventListener('DOMContentLoaded', function () {
                      var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
                      var $modalWindow = document.querySelector('#otkrutokno');
                      document.querySelector('[href="#otkrutokno"]').addEventListener('click', function (e) {
                        e.preventDefault();
                        $modalWindow.classList.add('open');
                        document.body.style.overflow = 'hidden';
                        document.querySelector('#otkrutokno').style.marginLeft = scrollbar;
                      });
                      document.querySelector('[href="#zakrutokno"]').addEventListener('click', function (e) {
                        e.preventDefault();
                        $modalWindow.classList.remove('open');
                        document.body.style.overflow = 'visible';
                        document.querySelector('#zakrutokno').style.marginLeft = '0px';
                      });
                    });
                    
                    А как атрибут base влияет на SEO? Не встречал информации на эту тему.
                    1. Сергей
                      04 января 2021, 16:00
                      .modal.open {
                            opacity: 1;
                            pointer-events: auto;
                            overflow-y: auto;
                          }

                      .modal помоему лишнее с ним не работает а без него работает
                      1. Александр Мальцев
                        04 января 2021, 16:49
                        Понял, вы хотите добавить к формам какой-то опозновательный признак. Тогда можно так:
                        const forms = document.querySelectorAll('form');
                        forms.forEach($form => {
                          const name = $form.name;
                          const $input = document.createElement('input');
                          $input.type = 'hidden';
                          $input.name = 'type';
                          $input.value = name;
                          $form.appendChild($input);
                        });
                        
                        Теперь у вас в каждой форме будет находится скрытое поле с name=«type» и значением равное name формы:
                        <input type="hidden" name="type" value="zakazform">
                        1. Сергей
                          05 января 2021, 11:10
                          попробовал создать кнопку button с таким же name как и в скрытом поле и не сработало.
                          const forms = document.querySelectorAll('form');
                          forms.forEach($form => {
                            const name = $form.name;
                            const $input = document.createElement('input');
                           const $button = document.createElement('button');
                          $button.name = name;
                            $input.type = 'hidden';
                            $input.name = 'type';
                            $input.value = name;
                            $form.appendChild($input);
                          $form.appendChild($button);
                          });
                          1. Александр Мальцев
                            05 января 2021, 15:32
                            Кнопки submit у вас в формах уже есть. Вам нужно просто к каждой из них добавить атрибут name со значением, например, равным значению этого атрибута у формы:
                            const forms = document.querySelectorAll('form');
                            forms.forEach($form => {
                              const name = $form.name;
                              const $input = document.createElement('input');
                              $input.type = 'hidden';
                              $input.name = 'type';
                              $input.value = name;
                              $form.appendChild($input);
                              $submit = $form.querySelector('[type="submit"]');
                              $submit.name = name;
                            });
                            
                            После этого в вызовах сниппетах FormIt для обработки форм добавить параметр submitVar с соответствующим значением:
                            ...
                            &submitVar=`dopolnitform`
                            ...
                            &submitVar=`contactform`
                            ...
                            &submitVar=`zakazform`
                            1. Сергей
                              05 января 2021, 19:49
                              начал проверять на своей почте вроде всё работает спасибо огромное. если будешь проверять формы то в имени пиши проверка чтоб не подумал на настоящий заказ.
                              1. Сергей
                                05 января 2021, 17:03
                                формы неработали когда я просто добавил &submitVar=`dopolnitform` а когда добавил название dopolnitform в скрытое поле то заработало как прежде с отправлением всех форм
                                <input type="hidden" name="dopolnitform" value="1" />
                                убераю это скрытое поле и форма опять не работает. Может у submit должно быть одинаковое имя с &submitVar=`dopolnitform`
                            2. Сергей
                              04 января 2021, 17:11
                              поставил код сейчас и в остальных &submitVar перестал работать. наверное еще снопке button поле name добавлять.
                            3. Александр Мальцев
                              04 января 2021, 16:12
                              Сложно что-то посоветовать, т.к. не вижу полной картины. Для начала я бы проверил страницу (разметку) через валидатор w3c может какие-то теги не закрыты или что-то другое. Да, и CSS бы проверил через валидатор. А потом бы уже двигался дальше. Т.к., по сути, ничего не поменялось, изменения коснулись только открытия модального окна, какой-то взаимосвязи с формой тут не вижу.
                              1. Сергей
                                04 января 2021, 16:21
                                steklograd-rostov.su/ вот сайт
                            4. Сергей
                              03 января 2021, 01:43
                              Точнее оно добавляло найм `pred`в кнопку отправить в форме
                              1. Александр Мальцев
                                03 января 2021, 16:00
                                Так добавьте его в кнопку с помощью JavaScript.
                                1. Сергей
                                  03 января 2021, 17:24
                                  попробовал добавить в поле найм значение и не получилось, отредактируете код как правильно.
                                  
                                  <button  class="form-btn vol" type="submit" >Отправить </button>
                                  
                                     document.querySelectorAll("button.form-btn[name^='zvon']").forEach(item => {
                                    item.addEventListener("click", e => {
                                      let elem = e.currentTarget;
                                      let name = elem.getAttribute("name");
                                      document.querySelector("button.form-btn>name").innerHTML = name;
                                    });
                                  });
                                  
                                  
                                  1. Александр Мальцев
                                    04 января 2021, 09:33
                                    Опишите подробнее что вы хотите сделать, а то не совсем понятно, как вам его поправить. Сейчас у вас есть несколько кнопок «button.form-btn» с name, которые начинаются на zvon. При нажатии на них вы хотите добавить обработчик события click, в котором нужно получить значение атрибута name этой кнопки, а дальше?
                                    1. Сергей
                                      04 января 2021, 10:42
                                      мне нужно без обработчика просто чтоб name zvon при нажатию на кнопку ей присваивалась name zvon, чтоб кнопки в формах отличались друг от друга. а то при нажатии на одну кнопку срабатывают целые три формы на странице а хочется чтоб форма работала отдельно от остальных.
                                      Если знаете как форму сделать независимой от остальных другим способом то я соглашусь на другой способ. Просто я какой знал способ отличия такой и использовал.
                                      1. Александр Мальцев
                                        04 января 2021, 15:01
                                        Можно просто кнопку с type="submit" поместить в форму (<form>...</form>), в этом случае будет отправляться только эта форма.
                                        1. Сергей
                                          04 января 2021, 15:57
                                          <button  class="form-btn vol" type="submit"  >Отправить </button>
                                          вот кнопка, в ней есть type=«submit» и не работает. в остальных формах без джава скрипта работает &submitVar=`content` на двух формах. а с джава скриптом перестал работать &submitVar, у меня формы на Formit может поэтому не работает type=«submit»
                              2. Сергей
                                02 января 2021, 11:10
                                все работает спасибо огромное, только в формах на сайте перестала работать функция в форме &submitVar=`pred` она помогала отличать формы друг от друга, а сейчас при нажатии на одну кнопку в форме отправляются все формы со страницы. Оно добавляло в скрытое поле найм `pred`вот в это поле
                                <input type="hidden" name="pred" value="1" />
                    2. Виталий
                      21 ноября 2020, 22:45
                      Доброго дня.
                      Спасибо за текст. Вижу много времени прошло, но рискну задать вопрос.

                      1) Почему если поместить внутри ссылки картинку, то окно не появляется, только страница тускнеет?
                      2) не закрывается окно по клику на X, ( я пользую вариант из комментария где много окон)
                      1. Александр Мальцев
                        24 ноября 2020, 14:44
                        Привет! Для этого нужно немного изменить JavaScript код (пример):
                        document.addEventListener('click', function (e) {
                          let $target = e.target;
                          if ($target.closest('[data-toggle="modal"]')) {
                            e.preventDefault();
                            $target = $target.closest('[data-toggle="modal"]');
                            document.querySelector($target.dataset.target).classList.add('open');
                          } else if ($target.dataset.close === 'modal') {
                            e.preventDefault();
                            $target.closest('.modal').classList.remove('open');
                          }
                        });
                        
                        1. Виталий
                          24 ноября 2020, 15:14
                          спасибо.
                      2. Владимир
                        10 ноября 2020, 15:58
                        Добрый день, Александр!
                        Я дублирую html блок под каждую новость, чтобы на главной любая аннотация переходила в полную (по Вашему примеру модального окна), но каждая из них лишь отображает содержание первого блока!
                        Пожалуйста, подскажите, как реализовать под каждую новость!
                        Спасибо!
                        1. Владимир
                          10 ноября 2020, 16:52
                          UPD Вроде разобрался
                          1. Анастасия
                            19 января 2021, 01:14
                            Подскажите, пожалуйста, как Вам удалось это сделать? Я столкнулась с точно такой же проблемой. Заранее благодарю
                            1. Владимир
                              20 января 2021, 12:45
                              Судя по Вашей песочнице (вверху прикреплённой), вместо «openmodal» используйте, например, индексы 1,2,3 и т.д. под каждую новость:
                              <a class="button" href="#1">Подробнее</a>
                              </div>
                              <div id="1" class="modal">
                              ...
                              1. Анастасия
                                20 января 2021, 13:33
                                Спасибо большое! Так и думала
                            2. Александр Мальцев
                              12 ноября 2020, 14:52
                              Привет! Рад что получилось.
                          2. Vladislav
                            04 сентября 2020, 12:10
                            Добрый день, хотелось бы понять как реализовать возможность не закрывать модальное окно автоматически при выборе какого-то селектора внутри, у меня их два, и мне нужно подождать пока на оба нажмут и только потом закрывать окно.
                            1. Vladislav
                              04 сентября 2020, 13:40
                              Более того, при выборе селекторов внутри, обновляется страница с данными, и вот даже не знаю как решить эту проблему, что бы страница обновилась (при выборе пользователем) но модальное окно не закрывалось
                              1. Александр Мальцев
                                06 сентября 2020, 14:52
                                Добрый день! Сделайте эту ситуацию (модальное окно с селекторами) в какой-нибудь песочнице и укажите ссылку на неё.
                            2. Andrei
                              07 июля 2020, 21:56
                              а как на этом сайте file:///C:/Users/%D0%A1%D0%B5%D0%B2%D0%B5%D1%80%D0%B8%D0%BD/Desktop/30/index.html#close сделать модальное окно при нажатии на хогвардс и т.д. модальные окна котрые я хочу добавить вы увзидите если прокрутите сайт вни3… ответьте срочно пожайлуста. 3аранее спасибо
                              1. Andrei
                                07 июля 2020, 21:58
                                нужет ответ до 09.07.2020
                              2. Амир
                                01 июля 2020, 01:24
                                Здравствуйте подскажите дело вот в чём. У меня данный код работает на всех браузерах хорошо кроме Сафари. В Сафари вообще не открывается. То есть нажимаю на кнопку но ничего не происходит. Как это можно исправить?
                                1. Александр Мальцев
                                  04 июля 2020, 15:19
                                  Здравствуйте! Может каких-то вендорных префиксов в CSS не хватает. В Safari >= 9 должно работать.
                                2. Святослав
                                  02 июня 2020, 14:54
                                  Подскажите пожалуйста, если планируется размещать слайдер в модальном окне, как предпочтительней на CSS или на яваскрипт делать модальное окно.

                                  1. Александр Мальцев
                                    02 июня 2020, 15:36
                                    Без CSS вам в любом случае не обойтись. Т.к. это единственная возможность, которая у нас есть для стилизации элементов в браузере. А вот использовать вам дополнительно JavaScript или нет, никто кроме вас не знает. Это зависит от функционала. Если вас будет устраивать то, что у вас получится только с использованием CSS, то тогда JavaScript не используйте. А если нет, то тогда с JavaScript.

                                    Поэтому, когда у вас есть возможность создать что-то без JavaScript и оно вас будет полностью устраивать, то JavaScript использовать не надо.
                                    1. Святослав
                                      03 июня 2020, 13:10
                                      Спасибо огромное Александр, ваши статьи и комментарии очень помогают в изучении ЯвасКрипт.
                                      1. Александр Мальцев
                                        03 июня 2020, 13:28
                                        Пожалуйста!
                                  2. blade23204
                                    16 мая 2020, 21:33
                                    Добрый день.
                                    Сделал по вашему примеру с JS.
                                    Если у меня несколько модальных окон что нужно менять?
                                    1. Александр Мальцев
                                      17 мая 2020, 05:19
                                      Привет!
                                      Если вы хотите доработать пример с JS, то нужно к ссылкам добавить какой-нибудь признак, который будет определять, что они предназначены для открытия модального окна. Например, атрибут data-toggle=«modal». А атрибут data-target использовать для указания селектора на то модальное окно, которое эта ссылка должна открывать.
                                      Например:
                                      <a href="#" data-toggle="modal" data-target="#modal-1">Открыть модальное окно 1</a>
                                      <a href="#" data-toggle="modal" data-target="#modal-2">Открыть модальное окно 2</a>
                                      
                                      Далее нужно переработать JavaScript код, например, следующим образом:
                                      document.addEventListener('click', function (e) {
                                        let target = e.target;
                                        if (target.dataset.toggle === 'modal') {
                                          e.preventDefault();
                                          document.querySelector(target.dataset.target).classList.add('open');
                                        } else if (target.dataset.close === 'modal') {
                                          e.preventDefault();
                                          target.closest('.modal').classList.remove('open');
                                        }
                                      });
                                      
                                      Ссылка на пример: открыть
                                      1. blade23204
                                        17 мая 2020, 11:53
                                        Спасибо большое! Особенно, за разжевывание информации) так понимаешь, что и как работает! еще раз спасибо!
                                    2. Дмитрий Устинов
                                      17 марта 2020, 16:36
                                      Здравствуйте, спасибо за пример. Классный!
                                      На локальной машине шикарно отработал, а на хостинге разворачивает модальные окна сразу :(( Битый час экспериментирую. Посмотрите? Картон и скотч открываются модально. Это получается только в браузере Avast, и IE. А в Эдж и Хроме — сразу открывает.
                                      www.sk-resurs.upakovkaprom.ru/resurs_upakovka.html
                                      1. Александр Мальцев
                                        18 марта 2020, 14:56
                                        Здравствуйте! Спасибо! Попробуйте перегрузить страницу с использованием Ctrl + F5.
                                        У вас в коде ошибка:
                                        document.querySelector([href="#openModal"]' || '[href="#openModal_skotch"]).style.marginLeft = '0px';
                                        
                                        1. Дмитрий Устинов
                                          18 марта 2020, 21:59
                                          И вот еще возник вопрос, модальное окно появляется в истории окон %) Можно его не записывать туда (убрать из истории)? А то по стрелке «назад» открывается, чтобы Вы думали?!)) — модальное окно, а не предыдущая страница
                                          1. Александр Мальцев
                                            21 марта 2020, 15:18
                                            Это пример реализации на чистом CSS. Чтобы этого не было можно просто немного поменять логику и добавить чуть-чуть JavaScript кода. Пример модального окна открывающегося и закрывающего с использованием JavaScript.
                                          2. Дмитрий Устинов
                                            18 марта 2020, 21:30
                                            Благодарю, получилось )) В чем прикол? И как можно быть уверенным в том, что у пользователя не возникнет такого прочтения кода?
                                            1. Александр Мальцев
                                              21 марта 2020, 15:41
                                              Когда браузер открывает страницу, он кэширует в соответствии с настройками вашего сервера ресурсы сайта, такие как стили, скрипты, изображения и т.д.
                                              И когда вы что-то изменяете, например, в CSS, браузер об этом не знает. Он при следующей загрузки берёт это из своего кэша. Это позволяет браузеру, когда пользователь переходит по страницам сайта или снова возвращается на него через некоторое время, не загружать эти ресурсы.
                                              Для того чтобы браузеру указать, что у вас изменились стили, к ссылке можно просто добавить GET-параметр, например, ver с некоторым значением:
                                              <link rel="stylesheet" href="/assets/css/main.css?ver=1.0.1">
                                              
                                        2. Elena
                                          11 марта 2020, 19:39
                                          не понимаю какое событие влияет на закрытие окна? в теге а есть ссылка на id="#close" который в стилях не отмечен, зачем она?
                                          1. Александр Мальцев
                                            14 марта 2020, 05:50
                                            Закрытие модального окна осуществляется посредством смены хэша, которое указывает на модальное окно (в данном случае «#openModal» на «#close»). Т.е. когда мы нажимаем на ссылку с «href="#openModal"», мы добавляем хэш «#openModal» к URL, после этого применяется CSS правило с селектором «.modal:target» и модальное окно становится видимым. Далее для того, чтобы скрыть модальное окно необходимо просто изменить хэш «#openModal» на какой-то другой (например, на «#close»). После этого правило с CSS селектором «.modal:target» уже не применяется и модальное окно скрывается.

                                            Вместо «#close» можете указать любой другой хэш, здесь основная задача — это сменить «#openModal» на что-то другое. Для него не нужны никакие стили, здесь просто необходимо чтобы CSS правило с селектором «.modal:target» не применялось к элементу (модальному окну).

                                            Можно, например установить href="#":
                                            <a href="#" title="Close" class="close">×</a>
                                            
                                          2. Владимир Сергеевич Ладный
                                            31 декабря 2019, 12:03
                                            А как сделать, чтобы модальное окно закрывалось на клике вне области модального окна (на сером фоне вокруг модального окна)
                                            1. Александр Мальцев
                                              01 января 2020, 17:04
                                              Для этого нужно добавить немного JavaScript на страницу:
                                              document.addEventListener('click', function (e) {
                                                if (location.hash === '#openModal') {
                                                  if (!e.target.closest('.modal-dialog')) {
                                                    location.hash = '#close';
                                                  }
                                                }
                                              });
                                              
                                              Пример с этим кодом можно посмотреть на этой странице.
                                            2. Ирина
                                              19 октября 2018, 19:16
                                              Здравствуйте. Скажите пожалуйста, какую роль здесь играет класс container?
                                              1. Александр Мальцев
                                                27 октября 2018, 14:32
                                                Здравствуйте. В конкретно этом примере данный класс никакой не играет роли. К нему не привязан код CSS и (или) JavaScript. В реальном же примере вы его можете использовать, чтобы установить элементам, которые его будут иметь, например, поля слева и справа.
                                              2. snt
                                                30 августа 2018, 08:28
                                                Приветствую! Исключительно нравятся ваши окна. Обнаружил баг на Сматрфоне iOS11, MobileSafari. Прокручивается не содержимое окна, а содержание страницы. При попытке закрыть окно — вместо него открывается другое с этой же страницы. Как можно поправить? И как сделать, чтобы окно закрывалось при клике за его областью?
                                                1. Александр Мальцев
                                                  03 сентября 2018, 14:28
                                                  Если окна не большие, то можно попробовать изменить overflow на hidden:
                                                  .modal:target {
                                                    opacity: 1;
                                                    pointer-events: auto;
                                                    overflow: hidden;
                                                  }
                                                  
                                                  Если на странице несколько модальных окон, то они должны иметь разные id.
                                                  Клик за областью можно реализовать, например, так:
                                                  document.querySelector('#openModal').addEventListener('click', function() {
                                                    location.hash = ''         
                                                  });    
                                                  document.querySelector('#openModal .modal-dialog').addEventListener('click', function(e) {
                                                    e.stopPropagation();
                                                  });
                                                  
                                                2. Denis
                                                  29 мая 2018, 07:48
                                                  Добрый день, Александр)
                                                  Подскажите как сделать тоже самое, но чтобы открывал в pop up другого документа, например test.html
                                                  1. Александр Мальцев
                                                    30 мая 2018, 16:33
                                                    Добрый! Вы хотите открыть в popup содержимое другого документа? Если да, то это выполняется с помощью AJAX (например, с помощью метода load или ajax библиотеки jQuery).
                                                    1. Denis
                                                      01 июня 2018, 06:12
                                                      спасибо
                                                  2. Владимир
                                                    22 мая 2018, 19:04
                                                    Добрый день!
                                                    После выполнения условий в браузерной строке остаются якоря #close и #openModal.
                                                    Можно ли реализовать тоже самое, но без использования URL, а например, выполнять событие с привязкой к классу?
                                                    Спасибо!
                                                    1. Александр Мальцев
                                                      27 мая 2018, 08:16
                                                      Добрый! Можно, но тогда придётся использовать JavaScript. Если интересно, то могу привести решение.
                                                      1. Владимир
                                                        29 мая 2018, 07:25
                                                        Было бы здорово, спасибо!
                                                        1. Александр Мальцев
                                                          30 мая 2018, 16:23
                                                          Для этого необходимо:
                                                          1. В CSS заменить селектор .modal:target на .modal.show:
                                                          .modal.show {
                                                            opacity: 1;
                                                            pointer-events: auto;
                                                            overflow-y: auto;
                                                          }
                                                          
                                                          2. Добавить JavaScript (с использованием jQuery):
                                                          $('a[href="#openModal"]').click(function(e){
                                                            e.preventDefault();
                                                            $($(this).attr('href')).addClass('show');
                                                          });
                                                          
                                                          $('#openModal').on('click','.close', function(e){
                                                            e.preventDefault();
                                                            $(e.delegateTarget).removeClass('show');
                                                          });
                                                          
                                                          Если необходимо на JavaScript без использования jQuery, то код можно посмотреть в примере. Пример доступен по этой ссылке.
                                                    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.