Как "#" (метка "хэш", знак номера) закрывает модальную рамку?

Недавно я прочитал эту статью о создании чистого модального окна CSS:

Я тестировал код, и он отлично работает. Я использую его для контакта с сайтом и регистрации/входа в систему.

Есть одна часть кода, которую я не полностью понял.

Как это...

<a href="#close" title="Close" class="close">X</a>

... закрыть окно?

В CSS не содержится ничего, что скрывает или удаляет элемент с классом close или любую аналогичную функцию таргетинга href, #close или title. Это просто одна строка кода сама по себе, и когда кликнет на нее, модальное окно закрывается (аккуратно и элегантно, я могу добавить).

Ясно, что текст "закрыть" не имеет значения. Текст может быть любым, и функция работает. Но если "#" удалено, стилизация завершается неудачно, но окно все равно закрывается.

Так что же такого особенного в "#"?

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}
<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  </div>
</div>

ОТВЕТЫ

Ответ 1

Когда вы нажимаете на href= "# openModal", он находит фрагмент с id = "openModal" и ставит на него фокус. Изменение его состояния. Css.modalDialog: цель вступает в действие, делая видимым модальность с непрозрачностью: 1.

Когда вы нажимаете на href= "# close", он пытается найти фрагмент id = "close", которого нет. Он также удаляет фокус с любого другого фрагмента, делая modalDialog свободным фокусом. Поэтому ничего не остается в фокусе. и модальные замыкания.

Ответ 2

Символьная метка # имеет значение по двум причинам.

  • предоставляет target как внутреннее местоположение.
  • позволяет target изменять, тем самым позволяя модальному закрыться с помощью CSS.

По определению символьная строка, следующая за #, представляет фрагмент URL-адреса.

От MDN

Фрагмент URL - это имя, которому предшествует хеш-метка (#), которая указывает внутреннее целевое местоположение (идентификатор) в текущем документе.

Хотя его обычно повторно назначают при использовании со скриптами [1] когда он используется сам по себе - хэш-знак без имени представляет пустой идентификатор фрагмента (показывающий поведение прокрутки до верхнего уровня).

Во время навигации к фрагменту соответствующий алгоритм можно прочитать в HTML5 docs, который включает ссылку на это поведение.

Если fragid - пустая строка, указанная часть документа является верхней частью документа.


Контекст

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

Если # удаляется, пустые href просто гиперссылки на ваш текущий документ, тем самым перезагружая страницу.

В примере CSS Modal используется #close, который может не иметь особого смысла, но он предотвращает прокрутку до верхнего поведения, ссылаясь на его внутреннее местоположение, которого не существует. Вероятно, это не правильный путь, но это использование указывает на preventDefault(), реализованный через CSS. Таким образом, это "чистый CSS-модальный".

Вот пример.

.scrollable-area {
  min-height: 150vh
}
<span>Top of Document</span>
<div class="scrollable-area"></div>
<a href="#">Empty. Scroll to top.</a><br>
<a href="#close">Non Empty. Stay Put.</a>

Ответ 3

"хэш-метка" - это селектор (в js, css...), чтобы указать идентификатор, поэтому, если у вас есть <div id="test">, и вы хотите применить некоторую функциональность или некоторый стиль css с js, вы выберете его как ' #test '(код будет другим, если вы используете фреймворк jQuery или нет). JQuery наиболее часто используется в настоящее время, поэтому вы найдете $('# test'). Я попытаюсь объяснить, как работает модальность, но сначала мне нужно объяснить все модальные части, чтобы привести нас в ситуацию. В качестве объяснения я буду использовать в качестве примера bootstrap modal (так как его наиболее часто используется в данный момент). Модальный:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Ответ 4

Во-первых, чтобы уточнить:

Псевдо-класс: целевой стиль используется для стилирования элемента, который является цель внутренней ссылки в документе.

Этот элемент не находится в каком-либо состоянии фокусировки, он является только целью внутренней ссылки.

В принципе, # представляет собой идентификатор фрагмента в HTML-объекте. Он следует за URL-адресом всего объекта, поэтому в качестве разделения требуется #.

Идентификатор фрагмента в конце URI также известен как "хэш" URL-адреса.

Итак, реальный вопрос...

Что произойдет, если вы не объявите хэш?

Если идентификатор фрагмента отсутствует или недействителен, target теперь является целым объектом. Значение цели теперь - весь ваш HTML-документ.

Вы можете видеть это поведение, когда вы закрываете свой модальный, он переместится до самого верха вашего документа в тэг <html>.

Смотрите это здесь после прокрутки:

body {
  height: 300vh;
}
a:first-of-type {
  position: fixed;
}
.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}
<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  </div>
</div>

Ответ 5

Расширяя мой комментарий, этот модальный пример полностью зависит от идентификатора фрагмента URL-адреса. Он используется не только для "запуска" модального дисплея в первую очередь, но он также используется в привязке для подавления href. Текст, следующий за #, в этом случае не имеет значения и должен быть опущен.

Ответ 6

Как объясняется в статье, в CSS используется цель: target для запуска непрозрачности: 1; Откройте окно, проверьте класс закрытия и измените значение непрозрачности, чтобы увидеть, что на самом деле происходит.