web2.0 всплывающее окно?

Question

Сайт, который мне нужен, требует проверки пользователя, когда он нажимает на ссылки, по которым он переходит на внешние веб-сайты (не спрашивайте, почему, он просто это делает).

Клиенту нужно что-то вроде всплывающего окна, в котором будет "Вы действительно хотите пойти?" вместе с 2 кнопками для да или нет.

Теперь я сделал все это в классическом всплывающем окне браузера, так как он действительно грациозно просто оставляет ссылки плана, если JS выключен. Мой вопрос ... есть ли другой способ сделать это, который немного более прикольный, чем обычные старые дерьмовые всплывающие окна?

Я экспериментировал с Thickbox и некоторыми ползунками JQuery , но как только вы отключили Javascript

а) "всплывающего окна" нет б) даже ссылка больше не указывает на то, куда она должна идти, благодаря разметке, необходимой для активации неработающего «всплывающего окна»

Есть идеи или мысли? : P

Answer 1

Что вы должны сделать, это что-то вроде этого:

$("a.outside").click(function (){
  openPopupWithThickbox();
  var result = getResultFromThickbox();
  return result;
});

Это предотвратит активацию ссылки, если пользователь нажмет Нет, но будет работать, если пользователь захочет покинуть сайт.

Конечно, это тоже изящно ухудшится.

Answer 2

Учитывая множество доступных опций, я бы выбрал диалоговый компонент jQuery UI .

Answer 3

У меня был запрос сделать это на странице с использованием jQuery, и я получил следующее:

jQuery( function () {
  jQuery( '#warn-dialog' )
    .dialog({
      autoOpen: false,
      modal: true,
      buttons : { 
        'Yes' : function () { 
          document.location.href = jQuery( '#email-link' ).attr( 'href' );
        },
        'No' : function () { 
          jQuery( '#warn-dialog' ).dialog( 'close' ); 
        }
      }
    });
  jQuery( '.warn-link' ).click( function ( event ) {
    event.preventDefault();
    jQuery( '#warn-dialog' ).dialog( 'open' );
  });
});

С HTML, как:

<div id="warn-dialog" class="ui-helper-hidden" title="Warning">
  <p>Are you sure you want to leave?</p>
</div>

<p>
  <a class="warn-link" href="http://link1.com">link1</a>
  <a class="warn-link" href="http://link2.com">link2</a>
</p>

Answer 4

Ответом было использование Thickbox:

<a href="http://www.whatever.com" onclick="tb_show('Warning', 'ajax.html?height=300&width=440', 'thickbox');return false">

Затем вы можете получить ajax.html (или любой другой) и отобразить. Если вы хотите закрыть Thickbox с помощью кнопки, просто добавьте:

<a href="#" onclick="tb_remove()">