Overlay is mainly use for forms on the site. Search and Login are two specific cases of overlays described on their own pages. Overlay needs to be implemented in the html structure outside of the #page-wrapper and uses the plugin aau-overlaycontent.

HTML Structure
<html>
  <head>
  </head>
  <body>
    <div id="page-wrapper">
      <!-- enter the header, content and footer here -->
    </div>
    <div data-aau="overlaycontent" class="overlay-content">
      <div class="row">
        <a href="#" class="icon-close-large"></a>
        <div class="content">
          <!-- the ajax will be loaded here -->
        </div>
      </div>
    </div>
  </body>
</html>
The Button

Add the data attribute data-aau="loginbtn" to open the overlay.

<a data-aau="overlaybtn" data-url="../../ajax/request-informations" class="btn btn-standard" href="javascript:void(0);">Request Information</a>

Attributes:

Name Type Default Required Description Example
data-url String '' yes define the url to load in the overlay data-url="../../ajax/request-information"
data-method String 'GET' no define the method used when calling the ajax, either 'GET' or 'POST' data-method="GET"
data-parameters String '' no define the parameters added when calling the ajax; they need to be formated as HTTP parameters 'page=1&type=academic'

Example:

Request Information

Sign In