Как убрать якорь (знак решётки — #) в URL после закрытия модального окна?

Question

Player_ABC @Player_ABC

JavaScript

Как убрать якорь (знак решётки — #) в URL после закрытия модального окна?

<body>
						<div id="auth">
							<div id="window">
								<h1 style="padding: 8px 0px 15px 0px">Авторизация</h1>
								<a class="close" href="#"></a>
								<button onclick="location.href='URL'" class="button-vkontakte">ВКонтакте</button>
								<br>
								<button onclick="location.href='URL'" class="button-facebook">Facebook</button>
								<br>
								<button onclick="location.href='URL'" class="button-google">Google</button>
								<br>
								<p style="margin: 10px">Авторизуясь через социальную сеть вы даёте согласие на обработку вашей публичной информации.</p>
							</div>
						</div>

Есть данный HTML код. При открытии #auth на странице, выходит модальное окно с выбором авторизации, в углу есть крестик для закрытия этого окна. После закрытия в URL остаётся знак решётки... Просто blablabla.com/# Можно ли его убрать без перезагрузки страницы..?

Вопрос задан более трёх лет назад
312 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

21 комментарий

Player_ABC @Player_ABC Автор вопроса

Не помогло.. Всё так же остаётся эта решётка...

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Он ни то что не убрал, а просто из начала переставил его в конец :D

Написано более трёх лет назад
Tim @Tim-A-2020

Player_ABC, покажи код

Написано более трёх лет назад
Tim @Tim-A-2020

Player_ABC, что значит из начала в конец переставил? Покажи какой url

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, 195.22.152.205 Во

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, В коде пробовал в onclick вшить history.pushState(null, null, location.href.replace('#', '')); вот и получилось что местами поменялось

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, В отдельный js файл вшивал.. (в jqueri втсавил :D)

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, Или я кажется не так понял куда вставлять history.pushState('', document.title, window.location.pathname);

Написано более трёх лет назад

Tim @Tim-A-2020

Player_ABC, для вашего случая

var modal = document.querySelector('#auth')
document.addEventListener('click', function(event) {
    event.preventDefault();
    if (event.target.hash && event.target.hash.includes('auth')) {
        modal.style.display = "block";
    } else if (event.target.classList.contains('close')) {
        modal.style.display = "none";
    }
})

Написано более трёх лет назад

Player_ABC @Player_ABC Автор вопроса

Tim, Я это могу в отдельный js файл засунуть?

Написано более трёх лет назад
Tim @Tim-A-2020

Player_ABC, да

Написано более трёх лет назад
Tim @Tim-A-2020

Player_ABC, файл скрипта перед закрывающим тегом body

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim,

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, Благодраю, а запуск его через onclick..?

Написано более трёх лет назад
Tim @Tim-A-2020

Player_ABC, нет. там уже висит событие

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, А, всё, сделал :) Благодарю вас!

Написано более трёх лет назад
Player_ABC @Player_ABC Автор вопроса

Tim, А после его закрытия не могу взаимодействовать с другими кнопками :D

Написано более трёх лет назад

Tim @Tim-A-2020

Player_ABC, замените

var modal = document.querySelector('#auth')
modal.addEventListener('click', function(event) {
    event.preventDefault();
    modal.style.display = "block";
})
document.querySelector('.close').addEventListener('click', function(event) {
    event.preventDefault();
    modal.style.display = "none";
})

Написано более трёх лет назад

Player_ABC @Player_ABC Автор вопроса

Tim, Заработали, но теперь не закрывается окно модальное(

Написано более трёх лет назад

Tim @Tim-A-2020

Player_ABC,

var modal = document.querySelector('#auth');
document.querySelector('.auth a').addEventListener('click', function(event) {
    event.preventDefault();
     modal.style.display = "block";
})
document.querySelector('.close').addEventListener('click', function(event) {
    event.preventDefault();
     modal.style.display = "none";
})

Написано более трёх лет назад

Player_ABC @Player_ABC Автор вопроса

Tim, Благодарю :)

Написано более трёх лет назад

2 комментария

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 3 часа назад
- 43 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 13 часов назад
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 15 часов назад
- 31 просмотр
0

ответов
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 22 часа назад
- 139 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- 23 часа назад
- 99 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- вчера
- 297 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- вчера
- 76 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- вчера
- 99 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Требуется Pure PhP + Symfony (Обязательно) разработчик для CRM/ERP

26 апр. 2024, в 14:07

3000 руб./в час

Спарсить каталог сайта

26 апр. 2024, в 14:06

15000 руб./за проект

Доработка бота на языке C++ (D) (достойная оплата труда)

26 апр. 2024, в 14:06

55555 руб./за проект

Answer 1 · 2020-12-26 08:58:31

По идее там висит какой то обработчик и там уже можно отменить действие по умолчанию.
Самый простой вариант на js

history.pushState(null, null, location.href.replace('#', ''));

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

document.querySelector('.close').addEventListener('click', event => event.preventDefault());

Answer 2 · 2020-12-26 11:44:46

xmoonlight @xmoonlight

https://sitecoder.blogspot.com

href="#"Уберите эту ДИЧЬ!
Есть событие onclick(), его и используйте.

Ответ написан более трёх лет назад

2 комментария

Как убрать якорь (знак решётки — #) в URL после закрытия модального окна?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт