aqLayer ( [options] )

Code Examples

    // attaches aqLayer to lower-right corner of element
    $('#example1').aqLayer({closeBtn:true,attach:'se'})
       .click(function(){ 
           $(this).aqLayer('lower-right corner; try moving this box around') 
       });


    // very simple example
    $('#example2').click(function(){ $(this).aqLayer('click to close') });


    // clone the content of div#layer and pops it up when button is pressed
    <button id="popme">aqLayer</button>
    <div id="layer" style="display:none">
    <button onclick="$('#layer').aqLayer('hide')">Click</button> or move</div>
    </div>
    $('#layer').aqLayer({clone:true,noClose:true,attach:'nw',offsetY:-49,offsetX:-5});
    $('#popme').click(function() { $('#layer').aqLayer('show') });

Visual Examples

Click on the brown boxes for demonstrations.

{attach: 'se'}

simple layer

Simple Raw Example

Copy and paste this code into a HTML file and click on the box. You should replace the first 3 JavaScript include files with your own.

<HTML>
<HEAD>
<SCRIPT type='text/javascript' src="/js/jquery126.js"></SCRIPT>
<script type="text/javascript" src="/js/jqueryui16.js"></script>
<script type="text/javascript" src="/-jquery/js/aqLayer.js"></script>
<SCRIPT type="text/javascript">
$(function(){
    $('#example').aqLayer({closeBtn:true,attach:'se'})
    .click(function(){ 
         $(this).aqLayer('lower-right corner; you cannot move this box around unless you have jQuery UI draggable loaded.');
    });
});
</SCRIPT>
</HEAD>
<BODY>
<div id="example" style="width: 70px; height: 70px; border: 1px solid #000">{attach:'se'}</div>
</BODY>
</HTML>