1

Как предоставить пользователю выбор перехода по ссылке ?

Когда пользователя нажимает на ссылку, должно появляться окно с двумя кнопками "да" и "нет". При нажатии "да" пользователь переходит по ссылке, при нажатии "нет" не переходит.

<a href="tip.html">Перейти</a>

Можно конечно сделать впереди div с z-index, и когда мы наживаем на него, эмулируем нажание на тег <a> но это мне не очень нравится. Может быть есть еще какой-нибудь способ?

1
  • Автор мог выбрать любой ответ в одну строчку, но выбрал самый длинный, ещё и на jquery. Вы, походу, из дома без фреймворков не выходите
    – Doofy
    22 июл 2016 в 16:18

5 ответов 5

7

jquery версия

$(function() {
  $('a').on('click', function(event) {
    if (confirm('Перейти?') === false) {
      event.preventDefault();
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="http://ya.ru">Ссылка</a>

5

$('.yes-no').on('click',function(e){
	$('.window').addClass('window_show');
});

$('.window').on('click','a', function(){
  if($(this).hasClass('yes')){
  	return true;
  }
  else{
  	$('.window').removeClass('window_show');
    e.preventDefault()
  }
});
.window{
  display: none;
  background-color: #000;
  width: 200px;
  height: 100px;
}
.window_show{
  display: block;
}
.window a{
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="yes-no" href="#">Перейти</a>
<div class="window">
  <a class="yes" href="tip.html">Да</a>  
  <a class="no" href="#">Нет</a>
</div>

1
  • return true немного лишний.
    – Qwertiy
    5 июл 2016 в 17:21
4

Можно вот так, без сторонних библиотек, ловить все клики в документе, и на клики по ссылкам выводить диалог «Переходить?»:

document.body.addEventListener('click', function(e){
  if( e.target.nodeName !== 'A') return true;
  return confirm("Перейти?");
});
<a href="http://ya.ru" target="_blank">Перейти</a>

3

<a onclick='if(confirm("Перейти?")) window.location.href = "tip.html";'>Перейти</a>

3

 <a href="https://google.com" onclick="return confirm('Перейти по ссылке?');">Перейти</a>

1
  • Самый лучший вариант. return true, либо return false по клику
    – Doofy
    22 июл 2016 в 16:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.