aqua.77

Два вопроса по работе ссылки </a>

3 сообщения в этой теме

<a href="#q1" id="q2">132</a>
<div id="q1">
<h1>Заголовок</h1>
<p>Элемент</p>
<a href="#x">Закрыть</a>
</div>
div{
	width:500px;
	height:400px;
	background:gray;
	position:fixed;
	top:90px;
	left:30%;
	display:none;
}
div:target{
	display:block;
}
body{height:10000px;}

https://jsfiddle.net/a9zeppqq/

Вопрос собственно такой: Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы, а если указать href="#x" то блок просто пропадает. И можно ли запретить скролинг страницы когда открыт блок?.

Изменено пользователем aqua.77

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
21 час назад, aqua.77 сказал:

Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы

Таково действие по умолчанию.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

http://htmlbook.ru/css/target

Цитата

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Видимо по умолчанию # это начало документа, вам выше уже сказали

https://jsfiddle.net/ggrxwfkj/

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

можно и заморочиться, через тег body сделать overflow:hidden, что уберет скролл, то тогда больше 1 такого окна не сделать

вот еще варианты если интересно
http://codepen.io/search/pens?q=css+modal&limit=all&type=type-pens

Изменено пользователем radioactive
1 пользователю понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас