TidBits

Este modal, com o objetivo de ser simples, completo e cross browser (é claro), foi desenvolvido por eu (Danilo Augusto) , André Machado, que também propôs a idéia e o Fabio Vieira (DJ Marquee) ambos programadores de interface da AgênciaClick, com base em uma função de modal do Rodrigo Castilho (ex Coordenador / Programador de interface da AgênciaClick) para nós mesmos utilizarmos no dia a dia do nossos trabalhos e projetos.

Já utilizamos outros modais mas todos eram limitados ou muito complexos e pesados então decidimos fazer o nosso. Funciona como um plugin de jQuery comum, tem apenas 2kb e uma série de opções.

O André Machado está trabalhando para oferecer mais opções como “confirm” e galeria de imagens nas próximas versões.

Primeiro chame o jQuery e o script do modal:

<script type="text/javascript" src="http://www.tidbits.com.br/download/_scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://www.tidbits.com.br/download/_scripts/modal/jquery-modal-1.0.pack.js"></script>

Aqui está disponível o jQuery, o Click Modal 1.0 compactado, o Click Modal 1.0 NÃO compactado e o script de exemplos que foi usado nessa página.

Também baixe a imagem de loading (load.gif) que deve ficar dentro de uma pasta img ou então altere isso no script original. (na próxima versão vai ser possível escolher uma imagem de load ).

Detalhe importante:

Como o evento de modal é atribuído ao elemento, a chamada do modal, deve estar ou depois do html, ou com onload. Para fazer com onLoad, coloque dentro o código do modal dentro do famoso });
Veja o exemplo:

$(document).ready(function(){
	$('a#exemplo').modal();
});

Depois coloque as seguintes linhas de código no seu CSS:

/* MODAL */
.load { position: absolute; top: 50%; left: 50%; width: 88px; height: 78px; margin: -39px 0 0 -44px; z-index: 99999;}
.bg_modal { position: absolute; top: 0; left: 0; z-index: 99998; }
.view_modal { position: absolute; left: 50%; top: 50%; text-align: left; z-index: 99998; }
.modal { visibility: hidden; cursor:pointer; }

O modal deve vir com visibility hidden no css pra não correr
o risco de clicar antes de carregar a página inteiramente e não carregar o modal.

Para colocar um botão de fechar no modal, coloque um rel=”modalclose”

<a href="#" rel="modalclose">
	Fechar
</a>

Exemplo:

// Javascript
$('a#exemplo').modal(); 

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo Simples
</a>

Exemplo Simples

Com esse exemplo simples, existe uma forma de invocar o modal sem usar javascript, é só colocar rel=”modal”.

Exemplo:

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal" rel="modal">
	Exemplo Simples
</a>

Exemplo Simples

Não é obrigatório o modal ser atribuído a um link (embora recomendado).
A função modal pode ser atribuído a outros elementos.
Por padrão a url que o modal carregal é o href o elemento, mas caso o modal não seja atríbuído a link, é possível atribuir uma url na função modal

Exemplo:

// Javascript
$('button#exemplo').modal({
	url:'http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html'
}); 

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo com botão
</a>

Exemplo com botão

É possível escolher a cor de background do modal alterando a propriedade backgroundColor

O valor default dessa propriedade é #000000 (preto)

Exemplos:

// Javascript
$('a#exemplo').modal({
	backgroundColor:'#ffff00'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	#ff0000 
</a>

#ffff00 (amarelo)

// Javascript
$('a#exemplo').modal({
	backgroundColor:'#0000FF'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	#0000FF
</a>

#0000FF (Azul)

// Javascript
$('a#exemplo').modal({
	backgroundColor:'#FF0000'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	#FF0000
</a>

#ff0000(Vermelho)

A opacidade do background do modal pode ser configurada como parâmetro adicional.
Como padrão, a opacidade é 0.5 (50%), mas pode ser configurada entre 0 (sem opacidade) a 1 (fundo preto)

Exemplos:

// Javascript
$('#exemplo').modal({
	backgroundOpacity: 0
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo sem opacidade
</a>

Exemplo sem opacidade

// Javascript
$('#exemplo').modal({
	backgroundOpacity: 0.2
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Fundo claro
</a>

Fundo claro

// Javascript
$('#exemplo').modal({
	backgroundOpacity: 0.7
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Fundo escuro
</a>

Fundo escuro

// Javascript
$('#exemplo').modal({
	backgroundOpacity: 1
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Fundo preto
</a>

Fundo preto

Como padrão o modal vem sempre centralizado na tela, mas é possível posicioná-lo num lugar
específico da página.

Exemplos:

// Javascript
$('#exemplo').modal({
	position: 'relative'
}); 

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo posicao relativa ao link
</a>

Exemplo posicao relativa ao link

A referência é usada quando a position do modal é relative.
Nesse caso, é possível colocar uma referência no modal, ou seja, em cima de onde o modal será posicionado.
Como padrão, a referência é o próprio link / button que chamou o modal (como no exemplo acima), mas é possível colocar qualquer objeto como referência, nesse caso, vamos colocar como referência o começo dessa div.

Exemplo:

// Javascript
$('#exemplo').modal({
	position: 'relative',
	referencePosition: $('div#exemploReferencia')
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo posicao relativa à um elemento
</a>

Exemplo posicao relativa à um elemento

Top e left são opções para ajustar o modal exatamente no local desejado.

Além de poder passar uma referencia, é possível escolher o quanto o modal deve ficar mais pra baixo ou mais pra esquerda da referência (valores em pixels).

Por default, os valores de top e left são 0;

Nesse caso, vamos colocar como referência o começo desse exemplo (esse box cinza).

Exemplo:

// Javascript
$('#exemplo').modal({
	position: 'relative',
	referencePosition: $('div#top_left'),
	left:30
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo com left: 30
</a>

Exemplo com left: 30

// Javascript
$('#exemplo').modal({
	position: 'relative',
	referencePosition: $('div#top_left'),
	top:40
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo com top: 40
</a>

Exemplo com top: 40

// Javascript
$('#exemplo').modal({
	position: 'relative',
	referencePosition: $('div#top_left'),
	top:20
	left: -50
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo com top: 20 e left -50
</a>

Exemplo com top: 20 e left -50

Nesse caso, podemos colocar o modal em cima / ao lado, embaixo do link que o chama.

Exemplo:

// Javascript
$('#exemplo').modal({
	position: 'relative',
	left: 250
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Exemplo com left 250 sem referência
</a>

Exemplo com left 250 sem referência

A tecla esc serve para fechar o modal quando está aberto.

É possível desativar essa funcionalidade setando a opção closeEsc como false;

Exemplo:

// Javascript
$('a#exemplo').modal({
	closeEsc:false
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	Desabilitando o ESC
</a>

Desabilitando o ESC

Com o closeClickOut ativo, quando o modal quando está aberto, ao clickar fora da área do modal,

ele fecha automaticamente.

Exemplo:

// Javascript
$('a#exemplo').modal({
	closeClickOut:true
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
	closeClickOut ativo
</a>

closeClickOut ativo

Como trabalhamos com ajax, é possível enviar informações via GET na URL.

Aceita javascript dentro do seu conteúdo.

O modal trabalha invocando uma div e não um iframe.

28/10/2008 – Bug corrigido ao invocar diversos modais com rel=”modal”