web2.0 Popup?

Question

Eine Seite, die ich brauche eine Überprüfung der Benutzer benötigt, wenn sie auf Links klicken, die sie zu externen Webseiten nehmen (fragen Sie nicht, warum es gerade tut ..)

Der Kunde möchte eine Art von Pop-up-Box, die dann haben „wollen Sie wirklich gehen?“ zusammen mit 2 Tasten für Ja oder Nein.

Jetzt habe ich all dies in dem klassischen Browser Popup bisher getan, wie es wirklich anmutig degradiert, nur den Plan ahref Links zu verlassen, wenn JS ausgeschaltet ist. Meine Frage ist, ... ist es eine andere Möglichkeit, dies zu tun, die ein wenig mehr funky als plain ol‘crappy Popups?

Ich habe mit thickbox und einige JQuery Slider aber sobald Sie Javascript

a) gibt es kein "Pop-up" b) auch die Verbindung nicht mehr auf, wo es angeblich dank der Markup geht erforderlich, um die nicht mehr arbeiten „Pop-up“ aktivieren

Irgendwelche Ideen oder Gedanken? : P

Answer 1

Die Antwort war thickbox zu verwenden:

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

Dann können Sie die ajax.html (oder was auch immer) und Anzeige retreive. Wenn Sie die thickbox mit einem Knopf schließen möchten, fügen Sie einfach:

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

Answer 2

Was sollten Sie tun, ist so etwas wie folgt aus:

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

Dies wird die Verbindung von der Aktivierung verhindern, wenn der Benutzer klickt auf Nein, aber funktioniert, wenn der Benutzer die Seite verlassen.

Natürlich wird es anmutig als auch verschlechtern.

Answer 3

die viele Möglichkeiten gegeben, würde ich jQuery UI wählen Dialogkomponente .

Answer 4

Ich hatte eine Anfrage dieses auf einer Seite zu tun mit jQuery, und kam mit dieser:

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

Mit HTML wie:

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