web2.0 popup?

Question

Hiya,

A site I need requires a check on the user when they click links which will take them to external websites (don't ask why, it just does..)

The client wants some sort of popup box which will then have "do you really want to go?" along with 2 buttons for yes or no.

Now I've done all this in the classic browser popup so far, as it degrades really gracefully to just leave the plan ahref links if JS is turned off. My question is... is there another way of doing this which is a little more funky than plain ol' crappy popups?

I've been experimenting with thickbox and some JQuery sliders but as soon as you disable Javascript

a) there is no "popup" b) even the link no longer points to where it was supposed to go thanks to the markup required to activate the no longer working "popup"

Any ideas or thoughts? :P

Answer 1

Given the many options available, I would choose jQuery UI's dialog component.

Answer 2

What you should do is something like this:

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

This will prevent the link from activating if the user clicks No, but will work if the user wants to leave the site.

Of course, it will degrade gracefully as well.

Answer 3

The answer was to use thickbox:

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

Then you can retreive the ajax.html (or whatever) and display. If you want to close the thickbox using a button, just add:

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

Answer 4

I had a request to do this on a page using jQuery, and came up with this:

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

With HTML like:

<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"&gt;link1&lt;/a&gt;
  <a class="warn-link" href="http://link2.com"&gt;link2&lt;/a&gt;
</p>