Simple Modal extender for custom css ( demo http://jsfiddle.net/2wg2p6km/)

jQuery-modal-extender.js

 $.fn.extend({
	"modal": function(cm, p){
		/* Modal windows jQuery extender 
		*  Source https://gist.github.com/MrSwed/2e64367959a60866cf30
		*  Demo http://jsfiddle.net/2wg2p6km
		*/
		if (!cm) cm = "init";
		var o = $(this);
		p = $.extend({}, {debug: false, "afterOpen": false, "afterClose": false}, p);
		if (cm != "init" && !o.data("inited")) o.modal("init", p);
		switch (cm) {
			case "init":
				$(this).each(function(){
					var o = $(this);
					p.debug && console.log("Modal inited", o);
					var cl = $(".close", o);
					if (!cl.size()) cl = $("<div class='close'>X</div>").prependTo(o);
					cl.unbind().click(function(e){
						p.debug && console.log("Modal Close button", o);
						o.modal("close", p)
					});
					o.click(function(e){
						p.debug && console.log("Modal click ", o, e);
						if (e.target == e.currentTarget && (e.offsetX < 0 || e.offsetY < 0 || e.offsetX > o.outerWidth() || e.offsetY > o.outerHeight())) {
							p.debug && console.log("Modal click close success");
							o.modal("close", p);
						}
					}).keypress(function(e){
						if (e.keyCode == 27) o.modal("close", p);
					});
					o.data("inited", true);
				});
				break;
			case "open":
				p.debug && console.log("Modal Open", o);
				o.show();
				if (p.afterOpen && typeof p.afterOpen == "function") {
					p.debug && console.log("AfterOpen function ", p.afterOpen);
					o.each(p.afterOpen);
				}
				break;
			case "close":
				p.debug && console.log("Modal Close", o);
				o.hide();
				if (p.afterClose && typeof p.afterClose == "function") {
					p.debug && console.log("AfterClose function ", p.afterClose);
					o.each(p.afterClose);
				}
				break;
		}
		return o;
	}
 });

jQuery-modal-extender.less

.modal {
 display: none;
 border-radius: 5px;
 left: 30%;
 min-width: 300px;
 padding: 1em;
 position: fixed;
 width: 40%;
 top: 20%;
 z-index: 1000;
 &:before {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
  bottom: 0;
  content: "";
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -2;
 }
 &:after {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  bottom: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
 }
 .close {
  border-radius: 3px;
  color: black;
  cursor: pointer;
  font-family: arial;
  height: 1.2em;
  position: absolute;
  right: 0.5em;
  text-align: center;
  top: 0.5em;
  transform: scale(1, 0.9);
  width: 1.2em;
  z-index:1;
  &:hover {
   box-shadow: 0 0 3px gray, -1px -1px 2px -1px gray inset;
  }
 }
}