web2.0 popup?

Question

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

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

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

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

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

Любые идеи или мысли? : P

Answer 1

Ответ был использовать 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()"> 

Answer 2

Учитывая множество доступных вариантов, я бы выбрал jQuery UI's dialog component.

Answer 3

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

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

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

Конечно, он будет деградировать и изящно.

Answer 4

У меня был запрос, чтобы сделать это на странице с помощью 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>