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 пользователю понравилось это

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


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

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

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

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

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


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

Войти

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


Войти сейчас