Wiki

Clone wiki

cloudengine / up-popup

Universal/unobtrusive/usable popups proposal (up-popup)

Also called xp-popup.

This is a proposal for a convention to declare the properties of a popup window using HTML5 custom data- and other attributes, such that a client (for example, unobtrusive Javascript) may create the new window. It is designed to give clear separation between the declaration/specification of a popup, and its implementation. It is somewhat analogous to the HTML5 <details> element, and builds on Accessify's perfect popup.

Use cases include embed code provided by an oEmbed service that wishes to open a new window (such embed code should not contain Javascript for security). In this case the oEmbed response can declare the popup, while the oEmbed client can implement a generic popup script, if it wishes.

Web accessibility: note that popup windows should be used sparingly, and the title attribute on the link and other means should be used to pre-warn the user.

Example: xp-popup.html, on Dropbox

Example declaration (HTML5)

<a
  role="button"
  class="xp-popup"
  data-xp-width="1124" data-xp-height="700"
  data-xp-scrollbars=1 data-xp-status=0 data-xp-location=0
  href="http://lamscommunity.org/lamscentral/sequence?seq_id=1007900"
  target="_blank"
  title="New window"
  >Full Info<span>, new window</span>
</a>

Example implementation (jQuery)

Obviously the Javascript below should be in a separate file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"><\/script>
<script>
$(document).ready(function(){
  $('a.xp-popup').click(function(){
    /*Security: check types? */
    var url =$(this).attr('href');
    var name=$(this).attr('target') ? $(this).attr('target') : '_blank';
    var wh = $(this).attr('data-xp-width') ? $(this).attr('data-xp-width') : 300;
    var ht = $(this).attr('data-xp-height')? $(this).attr('data-xp-height'): 200;
    var ln = $(this).attr('data-xp-location')? $(this).attr('data-xp-location'): 1;
    var ss = $(this).attr('data-xp-status')  ? $(this).attr('data-xp-status')  : 1;
    //var ty = $(this).attr('data-xp-type')? $(this).attr('data-xp-type'): 'standard';
    /*Accessibility: windows should be resizable and scrollable. */
    var spec =
'height='+ht+',width='+wh+',resizable=1,scrollbars=1,location='+ln+',status='+ss;
    window.open(url, name, spec);
    /*Set focus? */

    /*Prevent further actions. */
    return false;
  });
});
<\/script>

Example design (CSS)

a[role=button] {
  font-size:1em; text-decoration:none; padding:2px 2em; color:#000; background:#eee;
  border:1px solid #888; -moz-border-radius:4px; border-radius:4px;
}
a[role=button]:hover, a[role=button]:focus {
  background:#ddf; border-color:#666;
}
a[role=button] span {
  display:inline-block; padding:7px;
  background:url(... /external-link-ltr-icon.png) right no-repeat;
/*Accessibility: hints only visible to screen-readers.*/
  width:1px; height:1px; overflow:hidden;
}

Example: xp-popup.html, on Dropbox

Updated