nyroModal

Com nyroModal é possível abrir janelas (divs) modais. Essas janelas podem trazer imagens, páginas locais ou remotas, resposta de formulários, galerias de imagens.

INSTALAÇÃO:
Depois de fazer o download dos fontes do projeto link para o pacote .zip podemos começar instalação.
Inicialmente, devemos incluir os arquivos de scripts do jQuery e do nyroModal:

<script type="text/javascript" src="nyroModal-1.2.5/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="nyroModal-1.2.5/js/jquery.nyroModal-1.2.5.js">
</script>

Para abrir uma página/imagem em nyroMoldal como resultado de um link ou do envio de um formulário, simplesmente adicione a classe 'nyroModal' à tag. Exemplo:

<a href="#" class="nyroModal">
<form class="nyroModal" action="arquivo.php" method="post">

Para galerias de imagens, devemos adicionar um atributo 'rel' com um mesmo nome como valor à todos os links com 'class="nyroModal"'. O atributo title Exemplo:

<a href="img1.jpg" class="nyroModal" rel="gal" title="Title 1">Img 1</a>
<a href="img2.jpg" class="nyroModal" rel="gal" title="Title 2">Img 2</a>
<a href="img3.jpg" class="nyroModal" rel="gal" title="Title 3">Img 3</a>

Para que a janela não seja fechada quando for clicado fora da janela (clicar na parte escura da tela), devemos incluir 'rel="modal"' dentro da tag com a classe 'nyroModal'.

Também é possível abrir um nyroModal através de outro já aberto, utilizando a mesma regra citada acima. Fazendo isso o nyroModal é sobreescrito.

Dentro de um nyroModal é possível ter um botão para fecha-lo adicionando a classe 'nyroModalClose' à um botão ou à um link. Exemplos:

<a href="#" class="nyroModalClose">
<input type="button" class="nyroModalClose" value="Cancelar" />

Para atribuir o nyroModal em um trecho da página atualizado dinamicamente, é necessário chamar a seguinte função do framework:

$('#tudo a').nyroModal();

Nesse exemplo ele ativa o nyroModal em todas as tags 'a' dentro do container com 'id="tudo"' e que possuam 'class="nyroModal"'.