popup web 2.0?

Question

Un sito di cui ho bisogno richiede un controllo sull'utente quando fa clic su collegamenti che li porteranno a siti Web esterni (non chiedere perché, semplicemente ..)

Il cliente desidera una sorta di finestra popup che avrà quindi " vuoi davvero andare? " insieme a 2 pulsanti per sì o no.

Ora ho fatto tutto questo nel classico popup del browser finora, in quanto si degrada davvero con garbo lasciando semplicemente i collegamenti del piano se JS è disattivato. La mia domanda è ... c'è un altro modo di fare questo che è un po 'più funky dei semplici vecchi pop schifosi?

Ho sperimentato thickbox e alcuni cursori JQuery ma non appena disabiliti Javascript

a) non è presente " popup " b) anche il link non punta più a dove doveva andare grazie al markup richiesto per attivare il "popup" non funzionante

Qualche idea o pensiero? : P

Answer 1

La risposta era usare thickbox:

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

Quindi è possibile recuperare ajax.html (o qualsiasi altra cosa) e visualizzare. Se vuoi chiudere la thickbox usando un pulsante, aggiungi:

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

Answer 2

Quello che dovresti fare è qualcosa del genere:

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

Ciò impedirà l'attivazione del collegamento se l'utente fa clic su No, ma funzionerà se l'utente desidera uscire dal sito.

Naturalmente, si degraderà anche con grazia.

Answer 3

Date le molte opzioni disponibili, sceglierei l'interfaccia utente di jQuery componente della finestra di dialogo .

Answer 4

Ho ricevuto una richiesta per farlo su una pagina usando jQuery e ho pensato a questo:

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

Con HTML come:

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