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

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

При клике по ссылке с href="#" в окне браузера к адресной строке добавится #

При клике по ссылке с href="#name" в окне браузера к адресной строке добавится #name

якорь #id

У этого абаза id="paragraph1"

У этого абаза id="paragraph2"

У этого абаза id="paragraph3"

selector:target

Используя клик по ссылке с href="id" мы можем включить работу CSS правил для любого селектора с псевдоклассом :target

Также после клика произойдет переход внутри страницы - элемент с якорем (#id) окажется вверху страницы, если это возможно.

• У этой ссылки href="#paragraph1"
• У этой ссылки href="#paragraph2"
• У этой ссылки href="#paragraph3"

CSS

.paragraph1:target,
.paragraph2:target,
.paragraph3:target {
    color: orange;
}
        

Шаги создания модального окна:

1. создаем обертку с position: fixed на ширину/высоту окна браузера с темным фоном
2. внутри и по центру обертки помещаем div с контентом и ссылку

   <a href="#" title="Закрыть" class="close">X</a>

3. размещаем .close с помощью position: absolute;