Форум Сайтостроение Веб-строительство

Переход по ссылке JS

O
На сайте с 23.09.2014
Offline
76
Osavul
958

Как сделать переход по ссылке?: 

<a id="send" href="index.php?module=GroupsAdmin">Переход</a>

после того как всплыло диалоговое окно с кнопками подтверждения YES и NO. И при нажатии на кнопку YES должен осуществится переход по ссылке (ранее отменен с помощью event.preventDefault(); )-

Вот всплывающее окно: 


<div id="popup">

  <div class="popup-title">Предупреждение</div>

  <span>Вы действительно хотите отправить?</span>

  <div class="popup-act">

    <button id="btn-yes">Yes</button>

    <button id="btn-no">No</button>

  </div>

</div>

<div id="hide-layout"></div>

Вот код JS: 


$(document).ready(function()

{

  $('#popup, #hide-layout').hide(); // скрыли фон и всплывающее окно

  $('#hide-layout').css({opacity: 0.7}); // кроссбраузерная прозрачность

  alignCenter($('#popup')); // центрировали окно

  $(window).resize(function(){

    alignCenter($('#popup')); // центрирование при ресайзе окна

  });

  $('#send').click(function(event){

    event.preventDefault();

    $('#hide-layout, #popup').fadeIn(300); // плавно открываем

  });

  $('#hide-layout, #btn-no').click(function(){

    $('#hide-layout, #popup').fadeOut(300); // плавно скрываем

  });

  $('#btn-yes').click(function(){

    $('#hide-layout, #popup').fadeOut(300); // скрыли

  });

  // функция центрирования

  function alignCenter(elem){

    elem.css({

      left: ($(window).width() - elem.width()) / 2 + 'px', // получаем координату центра по ширине

      top: ($(window).height() - elem.height()) / 2 + 'px' // получаем координату центра по высоте

    });

  }

});
Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#1

проще конечно сделать саму <button id="btn-yes">Yes</button> ссылкой (стилизовать под кнопку).

ну а вообще:

$("#btn-yes").click(function() {

window.location.href = $("#send").attr("href");

return false;

});

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
K
На сайте с 03.06.2015
Offline
45
kostyanet
#2

Крайне низкий уровень абстракции. Столько всего ради одной конкретной ссылки, это очень необычно.

---------- Добавлено 26.06.2015 в 10:14 ----------

Понял, вы closure не осилили в теме /ru/forum/900759

Попробуйте еще раз. Задача та же самая. Вместо того, чтобы все предусматривать заранее, используйте текущий контекст и посылайте не аргументы куда-то там, а функции в качестве аргументов, то есть - методы вместо данных. Гнушаясь этой фичей вы теряете 90 процентов прелести js.

---------- Добавлено 26.06.2015 в 10:58 ----------

Ладно, в качестве саморекламы я сделал рабочий чертеж - https://jsfiddle.net/vu9n7j3f/2/ - открываете, щелкаете по ссылке, видите диалог, нажимаете кнопки. Стили с последнего проекта. Задавайте вопросы вместо того, чтобы изобретать велописед да еще на жиквери.

PS Фидля глючит, не знаю почему...

PPS Узнал почему - нельзя из кодов открывать ссылки. Поменял на alert - убдейт начал сохранять страницу.

MYSQL PHP JS HTML CSS SEO TXT США СССР
O
На сайте с 23.09.2014
Offline
76
Osavul
#3
Оптимизайка:
проще конечно сделать саму <button id="btn-yes">Yes</button> ссылкой (стилизовать под кнопку).

ну а вообще:

$("#btn-yes").click(function() {
window.location.href = $("#send").attr("href");
return false;
});

А если у меня есть допустим 20-30 ссылок и все имеют id = "send", но разные адреса href, как тогда осуществлять переход по нужному адресу (то есть переход по той ссылки по которой кликнули до появления диалогового окна)?

---------- Добавлено 26.06.2015 в 15:40 ----------

kostyanet, интегрировал ваш код по ссылке https://jsfiddle.net/vu9n7j3f/2/ у себя, выдает ошибку.

Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#4
Osavul:
20-30 ссылок и все имеют id = "send"

Это ошибка. id обязаны быть уникальными.

K
На сайте с 03.06.2015
Offline
45
kostyanet
#5

Вместо id используйте класс. Так и сделано для примера в той фидле. Чтобы ответить на вопрос про ошибки, надо знать про какие ошибки сообщается.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий