How to make accessible popup using jquery unobtrusively?

Question

How to make Accessible popup using jquery with custom size and poition in perfect center on screen on any resolution? if JavaScript would be disabled then link should be open like normal link in new window/tab. I need unobtrusive method to add class to link also in script not in xhtml.

Answer 1

One way to do this is to write a web page for the popup and link to it normally, then add your your js function of the onclick event load the page in using ajax to a dialog box, and return false from the js function.

That way the popup appears as a dialog box when js is turned on as the false return from the function disables the link action but the link behaves normally when js is off.

Answer 2

Something along these lines (as you didn't specify what happens if javascript is enabled fill out yourself the missing pieces)

<a id="accessibleA" href="http://www.google.com" target="_blank">Open Google</a>

$("#accessibleA").click(function() {
  //whatever to open the javascript popup
  return false;
});

Answer 3

You should use lightbox or something. http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

I did something like this recently, it uses jQuery to create a box, once, when a user exits the browsing area. The user can then close the box by clicking the X, or alternatively by pressing the escape button. Unobtrusive jQuery popup Box