Javascript Modal v.1.0

modal.css

* { margin: 0; padding: 0; }

.content-modal {
  width: 800px;
  height: 400px;
  background: #fff;
  margin-left: -400px;
  margin-top: -200px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.bg-modal {
  position: fixed;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  background: #000;
  display: none;
}

.content-modal {
  display: none;
}

modal.html

<div class="container">
  <div class="bg-modal"></div>
  <a href="javascript:void(0);" class="btn-modal" rel="teste01.html">Modal 01</a>
  <a href="javascript:void(0);" class="btn-modal" rel="teste02.html">Modal 02</a>
  <a href="javascript:void(0);" class="btn-modal" rel="teste03.html">Modal 03</a>
  <div class="content-modal">
    <a href="javascript:void(0);" class="btn-fechar">Fechar</a>
    <div class="inner-modal"></div>
  </div>
</div>

modal.js

$(document).ready(function() {
	var relLogos;
    $(".btn-modal").click(function(event) {
    	event.preventDefault();
      $(".bg-modal").fadeIn("slow");
    	$(".content-modal").show(400);
    	relLogos = $(this).attr("rel");
    	$(".inner-modal").load(relLogos);
    });
  
    $(".btn-fechar").click(function() {
    	$(".content-modal").hide(200);
      $(".bg-modal").fadeOut("slow");
    });
});