web2.0 popup?

Question

Un site dont j'ai besoin nécessite une vérification de l'utilisateur quand il clique sur des liens qui le mèneront à des sites externes (ne demandez pas pourquoi, il le fait juste ..)

Le client veut une sorte de boîte popup qui va alors "avez-vous vraiment envie d'y aller?" avec 2 boutons pour oui ou non.

Maintenant, j'ai fait tout cela dans la fenêtre contextuelle du navigateur classique, car il se dégrade vraiment gracieusement pour laisser les liens ahref plan si JS est éteint. Ma question est ... Y a-t-il une autre façon de faire cela qui est un peu plus funky que les pop-ups simples de merde?

J'ai expérimenté avec thickbox et certains JQuery sliders mais dès que vous désactivez le Javascript

a) il n'y a pas « pop-up » b), même le lien ne pointe plus à l'endroit où il était censé aller grâce au balisage nécessaire pour activer le "popup" qui ne fonctionne plus

Des idées ou des pensées? : P

Answer 1

La réponse était d'utiliser thickbox:

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

Ensuite, vous pouvez retreive le ajax.html (ou autre) et l'affichage. Si vous souhaitez fermer le thickbox à l'aide d'un bouton, il suffit d'ajouter:

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

Answer 2

Compte tenu des nombreuses options disponibles, je choisirais dialog component de jQuery UI.

Answer 3

Ce que vous devez faire est quelque chose comme ceci:

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

Cela permettra d'éviter le lien d'activation si l'utilisateur clique sur Non, mais ne fonctionnera que si l'utilisateur veut quitter le site.

Bien sûr, il se dégradera également gracieusement.

Answer 4

J'ai eu une demande de le faire sur une page en utilisant jQuery, et est venu avec ceci:

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'); 
    }); 
}); 

Avec HTML comme :

<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>