TAIS Overlay

by Chase Wilson

HTML

<base href="http://support.toshiba.com/" />
<a href="#hello">Hello</a>

CSS

/* --- Modal Overlay Styles --- */
#mask {position:absolute;left:0;top:0;z-index:9000;background-color:#fff;display:none;}
.window {position:absolute;left:0;top:0;width:350px;height:250px;display:none;z-index:9000;padding:20px;background: #fff;padding: 0px; #border: 3px #999 solid;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.4);border-radius: 2px;}
.window .close {position: absolute; top: -19px; right: 0px; /*height: 14px;*/ width: 50px; /*text-indent: -1500em;*/ overflow: hidden;color:#fff; text-transform: lowercase;cursor: pointer;background: #c00; font-size: 10px; padding: 3px 5px;text-align: center;}
.window .tl,.window .tm,.window .tr,.window .l,.window .r,.window .bl,.window .bm,.window .bs,.window .br {background-image: url(/images/toshibadirect/ui/chrome/drop-shadow.png);display: block;position: absolute;}
.window .tl,.window .tm,.window .tr,.window .l,.window .r,.window .bl,.window .bm,.window .bs,.window .br {#display:none;}
.window .tl {height: 12px; width: 15px; top:-12px; left:-15px; background-position: top left;}
.window .tm {height: 12px; width: 340px; top:-12px; left:0px; background-position: -15px 0px;}
.window .tr {height: 12px; width: 25px; top: -12px; right: -15px; background-position: top right;}
.window .l {width: 15px;height: 250px; top:0px; left: -15px; background-position: 0px -12px;}
.window .r {width: 15px;height: 250px; top:0px; right: -15px; background-position: right -12px;}
.window .bl {width: 15px;height: 25px; bottom:-20px; left: -15px; background-position: bottom left;}
.window .bm {height: 20px; bottom: -20px; background-position: -15px bottom;}
.window .bs {height: 20px;width: 20px; bottom: -20px;right:0px; background-position: -896px bottom;}
.window .br {height: 25px;width: 15px; bottom: -20px;right: -15px; background-position: bottom right;}
/* --- End Modal Overlay Styles --- */

JavaScript

(function($) {
    $.fn.overlay = function(options) {
        return this.each(function(e) {
            var o = $.overlay(this, options);
            o.initialize();
        });
    };

    $.overlay = function(element,options){
        return o = new Overlay(element,options);
    }

    var Overlay = window.Overlay = function(element,options){
        element = $(element);
        var self = this;

        //merge options with defaults
        var settings = $.extend({
            'width': 350,
            'height':250,
            'call':'something',
            'modal':true,
            'rel':'loading',
            'closebutton':true,
            'dropshadow':true,
            'mask':{
                active:true,
                opacity:.5,
                closeButton:true,
                clickClose: true
            },
            'events':{
                onCloseAfter:function(){return true;},
                onCloseBefore: function(){return true;},
                onOpen:function(){return true;},
                onContentLoaded:function(){return true;}
            }
        }, options || {});

        this.initialize = function() {
            
            element.click(function(e){
                e.preventDefault();
                self.launch();
            });
        };

        this.launch = function() {
            var href = element.attr('href');
            if(settings.modal) { 
                initMask();
            }

            var id = settings.rel;

            if(href){
                if(href.charAt(0) == '#'){
                    id = element.attr('href');
                    id = id.replace('#','');
                } else {
                    var rel = $(element).attr('rel');
                    if(!rel) rel = settings.rel;
                    var id = rel.toLowerCase();
                    id = id.replace(' ','-');
                }
            }

            openMask();
            self.openWindow(id,href);
        };

       ...