YUI Library JavaScript DHTML





    
Creating and Positioning an Overlay

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}








Creating and Positioning an Overlay



  

Overlays are extensions of Modules and differ in the sense that the float above the normal page flow.  They can be positioned in three different ways: By fixing them to the center of the viewport (overlay1 below), by specifying a position (overlay2), and by positioning them relative to a context element (overlay3).


Use the buttons in the example below to show and hide the three Overlay instances.

      





  overlay1:
  Show
  Hide


  overlay2:
  Show
  Hide


  overlay3:
  Show
  Hide

Align to me


  Overlay #1 from Markup

  This is a Overlay that was marked up in the document.
  End of Overlay #1





   
  
yui_2.7.0b.zip( 4,431 k)