JS Box, ConfirmBox and ActionButton

by BoxMan0617

CSS

._box-overlay {
    background-color: #EEEEEE;
    opacity: 0.7;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
}

._box {
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #FFFFFF;
    position: fixed;
    left: 50%;
    z-index: 1001;
    
    width: 400px;
}

._box ._box-inner {
    padding: 15px;
}

._box ._box-inner ._box-inner-buttons {
    margin-top: 5px;
    text-align: right;
}

._box ._box-inner ._box-inner-buttons ._box-action-button:last-child {
    margin-right: 0;
}

._box ._box-inner ._box-inner-buttons ._box-action-button {
    margin-right: 5px;
}

._box-action-button.alert {
    background-color: #FC311B;
    color: #FFFFFF;
    border-color: #C11502;
}

._box-action-button.alert:hover {
    background-color: #FD513E;
    color: #F3F3F3;
    border-color: #DB1702;
}

._box-action-button {
    text-decoration: none;
    padding: 2px 5px;
    min-width: 50px;
    text-align: center;
    display: inline-block;
    background-color: #DDDDDD;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #666666;
}

._box-action-button:hover {
    background-color: #EEEEEE;
    color: #444444;
    border-color: #DDDDDD;
}

JavaScript

var Box = function(message) {
	this._message = message;

	this._createOverlay = function() {
		var $overlay = $('<div class="_box-overlay"></div>');
		$('body').append($overlay);
	};

	this.create = function() {
		var $box = $('<div class="_box"><div class="_box-inner">'+this._message+'</div></div>');
		$box.css({
			'top': '-100px'
		});

		return $box
	};

	this.show = function(box) {
		var $box = box || this.create();

		this._createOverlay();
		
		$('body').append($box);
		var half = ($box.width() / 2) * -1;
		$box.css({
			'margin-left': half
		});
		$box.animate({
			'top': '40%'
		});
	};

	this.close = function() {
		$('._box-overlay').fadeOut(function() {
			$(this).remove();
		});
		$('._box').fadeOut(function() {
			$(this).remove();
		});
	};
};

var ConfirmBox = function(question, buttons) {
	Box.call(this, question);

	this._buttons = buttons || [];

	this.show = function() {
		var $box = this.create();

		var $buttonsBox = $('<div class="_box-inner-buttons"></div>');

		for(var i in this._buttons) {
			var $button = this._buttons[i].create();
			this._buttons[i].attachBox(this);

			$buttonsBox.append($button);
		}

		$box.find('._box-inner').append($buttonsBox);

		this.__proto__.show($box);
	};
};
ConfirmBox.prototype = new Box;

var Action = function(action) {
	this._action = action;

	this.triggerAction = function() {
		this._action();
	};
};

var ButtonAction = function(label, action, classes) {
	Action.call(this, action);

	this._label = label;
	this._box = null;
	this._classes = classes || '';

	this.attachBox = function(box) {
		this._box = box;
	};

	this.create = function() {
		var $button = $('<a href="javascript:void(0);" class="_box-action-button '+this._classes+'">'+this._label+'</a>');

		var ref = this;
		$button.on('click', function() {
			ref.triggerAction();
		});

		return $button;
	};
};
ButtonAction.prototype = new Action;

var yes = new ButtonAction('Yes', function() {
	this._box.close();
}, 'alert');

var cancel = new...