DefinitelyTyped/types/jquery.tools/jquery.tools-tests.ts

/* from documentation at http://jquerytools.github.io/documentation/overlay/index.html */

 $("img[rel]").overlay();

 const triggers = $(".modalInput").overlay({
 
      // some mask tweaks suitable for modal dialogs
      mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
      },
 
      closeOnClick: false
  });

  const buttons = $("#yesno button").click(function(this: JQuery, e: JQueryEventObject) {
 
      // get user input
      const yes = buttons.index(this) === 0;
 
      // do something with the answer
      triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
  });

// select one or more elements to be overlay triggers
$(".my_overlay_trigger").overlay({
    // one configuration property
    mask: {
      color: '#ccc'
    },
    // another property
    top: 50
    // ... the rest of the configuration properties
});

$("#prompt form").submit(function(this: JQuery, e: JQueryEventObject) {
 
      // close the overlay
      triggers.eq(1).overlay<JQueryTools.overlay.Overlay>().close();
      // or more straightforward:
      triggers.data('overlay').close();
 
      // get user input
      const input = $("input", this).val();
 
      // do something with the answer
      triggers.eq(1).html(input);
 
      // do not submit the form
      return e.preventDefault();
  });

$.tools.overlay.addEffect('', () => {}, () => {});

/* custom effects */
$.tools.overlay.addEffect("myEffect", function(position, done) {
    /*
    - 'this' variable is a reference to the overlay API
    - here we use jQuery's fadeIn() method to perform the effect
    */
    this.getOverlay().css(position).fadeIn(this.getConf().speed, done);
  },
 
  // close function
  function(done) {
    // fade out the overlay
    this.getOverlay().fadeOut(this.getConf().closeSpeed, done);
  }
);

$("#apple img[rel]").overlay({effect: 'apple'});

  // select the overlay element - and "make it an overlay"
  $("#facebox").overlay({
    // custom top position
    top: 260,
    // some mask tweaks suitable for facebox-looking dialogs
    mask: {
    // you might also consider a "transparent" color for the mask
    color: '#fff',
    // load mask a little faster
    loadSpeed: 200,
    // very transparent
    opacity: 0.5
    },
    // disable this for modal dialog-type of overlays
    closeOnClick: false,
    // load it immediately after the construction
    load: true
});

$(function() {
 
    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay({
 
        mask: 'darkred',
        effect: 'apple',
 
        onBeforeLoad() {
            // grab wrapper element inside content
            const wrap = this.getOverlay().find(".contentWrap");
 
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }
 
    });
});

$(() => {
    // positions for each overlay
    const positions = [
        [0, 530],
        [400, 20],
        [400, 530],
        [0, 20]
    ];
 
    // setup triggers
    $("button[rel]").each(function(this: JQuery, i: number) {
 
        $(this).overlay({
 
            // common configuration for each overlay
            oneInstance: false,
            closeOnClick: false,
 
            // setup custom finish position
            top: positions[i][0],
            left: positions[i][1],
 
            // use apple effect
            effect: 'apple'
 
        });
    });
});

// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
 
    // use Overlay API to gain access to crucial elements
    const conf = this.getConf(),
    overlay = this.getOverlay();
 
    // determine initial position for the overlay
    if (conf.fixed)  {
        css['position'] = 'fixed';
    } else {
        css['top'] += $(window).scrollTop();
        css['left'] += $(window).scrollLeft();
        css['position'] = 'absolute';
    }
 
    // position the overlay and show it
    overlay.css(css).show();
 
    // begin animating with our custom easing
    overlay.animate(
        { top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done
    );
 
    /* closing animation */
}, function(done) {
    this.getOverlay().animate(
        { top: '-=55', opacity: 0, width: '-=20' }, 300, 'drop',
        function(this: JQuery) {
            $(this).hide();
            done.call(null);
        });
});

$("img[rel]").overlay({
    effect: 'drop',
    mask: '#789'
});