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

песочница
jsfiddle.net/AnastasiaWeb/zb3rnq9e/3/

Привет!
Тут нужно просто установить разным модальным окнам разные 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>

Песочница: открыть пример

Вам необходимо при нажатии на ссылку отменить стандартное действие браузера, т.е. вызвать метод 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';
  });
});

Вставил Ваш код и почему то окно вообще перестало открываться(.Спасибо что быстро отвечаете.

В этом случае вызывать окно следует с помощью JavaScript, либо убирать preventDefault и прописывать полный URL (это у вас из-за того, что в HTML коде имеется атрибут base).

Вот прописал полный урл (правильно?) но работает как работал. а атрибут 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';
  });
});

Здесь тогда нужно прописывать полный путь к странице, а не [[++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? Не встречал информации на эту тему.

все работает спасибо огромное, только в формах на сайте перестала работать функция в форме &submitVar=`pred` она помогала отличать формы друг от друга, а сейчас при нажатии на одну кнопку в форме отправляются все формы со страницы. Оно добавляло в скрытое поле найм `pred`вот в это поле

<input type="hidden" name="pred" value="1" />

Точнее оно добавляло найм `pred`в кнопку отправить в форме

Так добавьте его в кнопку с помощью JavaScript.

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

<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;
  });
});

Опишите подробнее что вы хотите сделать, а то не совсем понятно, как вам его поправить. Сейчас у вас есть несколько кнопок «button.form-btn» с name, которые начинаются на zvon. При нажатии на них вы хотите добавить обработчик события click, в котором нужно получить значение атрибута name этой кнопки, а дальше?

мне нужно без обработчика просто чтоб name zvon при нажатию на кнопку ей присваивалась name zvon, чтоб кнопки в формах отличались друг от друга. а то при нажатии на одну кнопку срабатывают целые три формы на странице а хочется чтоб форма работала отдельно от остальных.
Если знаете как форму сделать независимой от остальных другим способом то я соглашусь на другой способ. Просто я какой знал способ отличия такой и использовал.

Можно просто кнопку с type="submit" поместить в форму (<form>...</form>), в этом случае будет отправляться только эта форма.

<button  class="form-btn vol" type="submit"  >Отправить </button>

вот кнопка, в ней есть type=«submit» и не работает. в остальных формах без джава скрипта работает &submitVar=`content` на двух формах. а с джава скриптом перестал работать &submitVar, у меня формы на Formit может поэтому не работает type=«submit»

.modal.open {
      opacity: 1;
      pointer-events: auto;
      overflow-y: auto;
    }

.modal помоему лишнее с ним не работает а без него работает

Сложно что-то посоветовать, т.к. не вижу полной картины. Для начала я бы проверил страницу (разметку) через валидатор w3c может какие-то теги не закрыты или что-то другое. Да, и CSS бы проверил через валидатор. А потом бы уже двигался дальше. Т.к., по сути, ничего не поменялось, изменения коснулись только открытия модального окна, какой-то взаимосвязи с формой тут не вижу.

steklograd-rostov.su/ вот сайт

Понял, вы хотите добавить к формам какой-то опозновательный признак. Тогда можно так:

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">

поставил код сейчас и в остальных &submitVar перестал работать. наверное еще снопке button поле name добавлять.

попробовал создать кнопку 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);
});

Кнопки 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`

формы неработали когда я просто добавил &submitVar=`dopolnitform` а когда добавил название dopolnitform в скрытое поле то заработало как прежде с отправлением всех форм

<input type="hidden" name="dopolnitform" value="1" />

убераю это скрытое поле и форма опять не работает. Может у submit должно быть одинаковое имя с &submitVar=`dopolnitform`

начал проверять на своей почте вроде всё работает спасибо огромное. если будешь проверять формы то в имени пиши проверка чтоб не подумал на настоящий заказ.

Привет! Для этого нужно немного изменить 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');
  }
});

спасибо.

UPD Вроде разобрался

Привет! Рад что получилось.

Подскажите, пожалуйста, как Вам удалось это сделать? Я столкнулась с точно такой же проблемой. Заранее благодарю

Судя по Вашей песочнице (вверху прикреплённой), вместо «openmodal» используйте, например, индексы 1,2,3 и т.д. под каждую новость:

<a class="button" href="#1">Подробнее</a>
</div>
<div id="1" class="modal">
...

Спасибо большое! Так и думала

Более того, при выборе селекторов внутри, обновляется страница с данными, и вот даже не знаю как решить эту проблему, что бы страница обновилась (при выборе пользователем) но модальное окно не закрывалось

Добрый день! Сделайте эту ситуацию (модальное окно с селекторами) в какой-нибудь песочнице и укажите ссылку на неё.

нужет ответ до 09.07.2020

Здравствуйте! Может каких-то вендорных префиксов в CSS не хватает. В Safari >= 9 должно работать.

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

Поэтому, когда у вас есть возможность создать что-то без JavaScript и оно вас будет полностью устраивать, то JavaScript использовать не надо.

Спасибо огромное Александр, ваши статьи и комментарии очень помогают в изучении ЯвасКрипт.

Пожалуйста!

Привет!
Если вы хотите доработать пример с 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');
  }
});

Ссылка на пример: открыть

Спасибо большое! Особенно, за разжевывание информации) так понимаешь, что и как работает! еще раз спасибо!

Здравствуйте! Спасибо! Попробуйте перегрузить страницу с использованием Ctrl + F5.
У вас в коде ошибка:

document.querySelector([href="#openModal"]' || '[href="#openModal_skotch"]).style.marginLeft = '0px';

Благодарю, получилось )) В чем прикол? И как можно быть уверенным в том, что у пользователя не возникнет такого прочтения кода?

И вот еще возник вопрос, модальное окно появляется в истории окон %) Можно его не записывать туда (убрать из истории)? А то по стрелке «назад» открывается, чтобы Вы думали?!)) — модальное окно, а не предыдущая страница

Это пример реализации на чистом CSS. Чтобы этого не было можно просто немного поменять логику и добавить чуть-чуть JavaScript кода. Пример модального окна открывающегося и закрывающего с использованием JavaScript.

Когда браузер открывает страницу, он кэширует в соответствии с настройками вашего сервера ресурсы сайта, такие как стили, скрипты, изображения и т.д.
И когда вы что-то изменяете, например, в CSS, браузер об этом не знает. Он при следующей загрузки берёт это из своего кэша. Это позволяет браузеру, когда пользователь переходит по страницам сайта или снова возвращается на него через некоторое время, не загружать эти ресурсы.
Для того чтобы браузеру указать, что у вас изменились стили, к ссылке можно просто добавить GET-параметр, например, ver с некоторым значением:

<link rel="stylesheet" href="/assets/css/main.css?ver=1.0.1">

Закрытие модального окна осуществляется посредством смены хэша, которое указывает на модальное окно (в данном случае «#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>

Для этого нужно добавить немного JavaScript на страницу:

document.addEventListener('click', function (e) {
  if (location.hash === '#openModal') {
    if (!e.target.closest('.modal-dialog')) {
      location.hash = '#close';
    }
  }
});

Пример с этим кодом можно посмотреть на этой странице.

Здравствуйте. В конкретно этом примере данный класс никакой не играет роли. К нему не привязан код CSS и (или) JavaScript. В реальном же примере вы его можете использовать, чтобы установить элементам, которые его будут иметь, например, поля слева и справа.

Если окна не большие, то можно попробовать изменить 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();
});

Добрый! Вы хотите открыть в popup содержимое другого документа? Если да, то это выполняется с помощью AJAX (например, с помощью метода load или ajax библиотеки jQuery).

спасибо

Добрый! Можно, но тогда придётся использовать JavaScript. Если интересно, то могу привести решение.

Было бы здорово, спасибо!

Для этого необходимо:
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, то код можно посмотреть в примере. Пример доступен по этой ссылке.

Добрый день Александр, я перечитал всю историю переписки но не нашел что искал, т.е. находил но не полностью. Прошу помочь с одним JavaScript. Модальное окно прекрасно работает, но хотел не много поправить. Как и раннее был вопрос от (Владимира) чтоб в браузерной строке не оставались якоря #close и #openModal, и это работает. Второй вопрос это по закрытию мод. окно. Подскажите пожалуйста как ещё правильно дописать код чтоб модальное окно закрылось при клике вне окна?

Когда я прописал 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';
      });
    });
$('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');
});

  document.addEventListener('click', function (e) {
  if (location.hash === '#openModal') {
    if (!e.target.closest('.modal-dialog')) {
      location.hash = '#close';
    }
  }
});

Привет!
Пример: itchief.ru/examples/lab.php?topic=javascript&file=modal-01
Описание примера добавлю в статью немного попозже.

Спасибо большое за оперативную помощь Александр! Единственное другая проблемка вылезла. Код я переписал по новому который вы скинули пример, всё как я хотел работает, чтоб не добавлялись в адресной строке якоря #close и #openModal и закрывать окно в любом месте, вне окна. Но по каким то причинам окно открывается, если нажимать только на текст т.е. (Открыть модальное окно). Просто в место текста я использую иконками как кнопки, сами иконки у меня не картинки jpeg, я я использую через тэг . Я поэкспериментировал и понял что если добавить любой тег p, div, span и т.д. в ну три тега <а> перестает работать и окно не открывается. Вот и сижу теперь кумекаю почему не хочет так работать, ведь на старом JavaScript работал.

На всякий случай ниже код который не хочет так работать

<div class="container">
    <div style="text-align: center;">
      <a href="#" data-toggle="modal" data-target="#modal-1"><span class="fa-stack fa-lg">
  <i style="color:#9199a5;" class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span></a>
    </div>
    <div id="modal-1" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title">Название</h3>
            <a href="#" class="close" data-toggle="modal" title="Закрыть">×</a>
          </div>
          <div class="modal-body">
            Содержимое модального окна...
          </div>
        </div>
      </div>
    </div>
  </div>

Подправил код в примере для таких сценариев.

Александр подскажите пожалуйста, где или в ком примере вы поправили? т.е. я предполагал что в этом Пример: itchief.ru/examples/lab.php?topic=javascript&file=modal-01, но там ни чего по моему не изменилось. Модальное окно конечно работает, но при добавить любой тег p, div, span и т.д. в ну три тега <а> то перестает работать. Может это в другом примере поправили JavaScript или может в стилях?

Да, в этот пример. JavaScript код изменил. Должно работать.

Александр всё работает, спасибо большое!!!