Modal plugin designed to display in tabs the code html and css of the requested page.

modalCodigo.html

	<div>
		<ul class="abas-nav ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
	      <li class="aba ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#aba1">HTML</a></li>
	      <li class="aba ui-state-default ui-corner-top"><a href="#aba2">CSS</a></li>
	      <li class="aba ui-state-default ui-corner-top"><a href="#aba3">JS</a></li>
	    </ul>
	    <div id="aba1" class="ui-widget-content ui-corner-bottom">
	    	<h4>Código HTML:</h4><pre class="code" id="html" lang="html"></pre>	      
	    </div>
	    <div id="aba2" class="ui-widget-content ui-corner-bottom">
	    	<h4>Código CSS:</h4><pre class="code" id="css" lang="css"></pre>				
	    </div>
	    <div id="aba3" class="ui-widget-content ui-corner-bottom">
	    	<h4>Código Javascript:</h4><pre class="code" id="js" lang="js"></pre>
	    </div>
	</div> 

  <script type="text/javascript" src="/js/libs/jquery.ui.core.js"></script>
  <script type="text/javascript" src="/js/libs/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="/js/libs/jquery.ui.tabs.js"></script>

modalCodigo.js

/*
 *  Nome: jQuery Modal Plugin
 *  Versao: 1.0 (JAN-2011)
 *  Descricao: Cria janelas modais para apresentacao de conteudo extra
 *  Autor: Equipe Design da Infraero
 *  Contato: equipedesignti@infraero.gov.br  
 */


// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {
    
    // undefined is used here as the undefined global variable in ECMAScript 3 is
    // mutable (ie. it can be changed by someone else). undefined isn't really being
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    // can no longer be modified.
    
    // window and document are passed through as local variables rather than globals
    // as this (slightly) quickens the resolution process and can be more efficiently
    // minified (especially when both are regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'jModalCodigo',
        defaults = {
            url: '#',
			verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
			horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels
			repositionOnResize: true,           // re-centers the dialog on window resize
			overlayOpacity: .7,                 // transparency level of overlay		
			overlayColor: '#ccc',               // base color of overlay
			closeEsc:true,						// permite fechar o modal ao pressionar a tecla esc
			closeClickOut: true,				// permite fechar o modal ao clicar fora dele
			abas: true,                 		// if specified, this class will be applied to all dialogs
			title: 'Códigos',					// titulo default
			largura: 900						// width default
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method which merges the contents of two or 
        // more objects, storing the result in the first object. The first object
        // is generally empty as we don't want to alter the default options for
        // future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;
        
        this._defaults = defaults;
        this._name = pluginName;
        
        this.init();
    }
    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and the options via the instance, 
        // e.g., this.element and this.options

        this.hide();
		this.overlay('exibir');		
		
		$("body").append(
		'<div id="modal_container" class="box container_12 abas themed_box ui-tabs ui-widget ui-widget-content ui-corner-all">' +
			'<div class="topoModal">' +
				'<h1 id="modal_titulo"></h1><a href="#" class="fechaModal"></a>' +
			'</div>'+
			'<div id="modal_conteudo"></div>' +
		'</div>');	
		
		
		// IE6 Fix
		var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 

		$("#modal_container").css({
			position: pos,
			zIndex: 99999,
			padding: 0,
			margin: 0,
			width: this.largura
		});
				
		//Insere o titulo presente na variavel this.title, sendo valor default ou do usuario
		$("#modal_titulo").text(this.title);
	
		//Preencher conteudo com divs que contem a estrutura para o uso de abas
		$("#modal_conteudo").html($("#modal_conteudo").html() + $.ajax({
						   	url: "/html/modalCodigo.html",
							async: false}).responseText);

		//buscar codigos html e css para preencher cada aba
		var fonte = "";
		fonte = "/html/"+this.url+".html";								
		$.get(fonte, function(data){
			$("#modal_conteudo #html")	
			.text(data)
			.highlight({source:1, zebra:1, indent:'space', list:'ul'});
		});			

		fonte = "/css/"+this.url+".css";
		$("#modal_conteudo #css").html( $.ajax({
							   	url: fonte,
							   	error: function(jqXHR, textStatus, errorThrow){//errorThrow => informação do servidor referente ao erro ocorrido
									if (errorThrow == "Not Found"){
										$("#aba2").html("<h4>Código CSS:</h4><p>Não há arquivo CSS correspondente.</p>");												
									} 
							   	}, 
								async: false}).responseText ).highlight({source:1, zebra:1, indent:'space', list:'ul'});
						
		this.reposition();
		this.maintainPosition(true);

		//Fechar modal 
		if(this.closeClickOut == true){
			$('#modal_overlay').click(function(){
						this.hide();
			});
		}
		if(this.closeEsc == true){
				$(window).keydown(function(event){
					if(event.keyCode==27){
						this.hide();
					}
				});
		}
		$(".fechaModal").click( function() {
			this.hide();
			return false;
		});
    };	
	Plugin.prototype.hide = function () {
		$("#modal_container").remove();
		this.overlay('esconder');
		this.maintainPosition(false);		
    };
    Plugin.prototype.overlay = function(status) {
		switch( status ) {
			case 'exibir':
				this.overlay('esconder');
				$("body").append('<div id="modal_overlay"></div>');
				$("#modal_overlay").css({
					position: 'absolute',
					zIndex: 99998,
					top: '0px',
					left: '0px',
					width: '100%',
					height: $(document).height(),
					background: this.overlayColor,
					opacity: this.overlayOpacity
				});
			break;
			case 'esconder':
				$("#modal_overlay").remove();
			break;
		}
	};
	Plugin.prototype.reposition = function () {
		var topo = 20;
		var left = (($(window).width() / 2) - ($("#modal_container").outerWidth() / 2)) + this.horizontalOffset;
		if( topo < 0 ) topo = 0;
		if( left < 0 ) left = 0;
		
		// IE6 fix
		if( $.browser.msie && parseInt($.browser.version) <= 6 ) topo = topo + $(window).scrollTop();
		
		$("#modal_container").css({
			top: topo + 'px',
			left: left + 'px'
		});
		$("#modal_overlay").height( $(document).height() );		
	};		
	Plugin.prototype.maintainPosition = function(status) {
		if( this.repositionOnResize) {
			switch(status) {
				case true:
					$(window).bind('resize', function() {
						this.reposition();
					});
				break;
				case false:
					$(window).unbind('resize');
				break;
			}
		}
	};
    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    }
})(jQuery, window, document);