Janela Modal com jQuery – Lightbox para Página Html e Imagens

Olá se eu quiser colocar o codigo java em um unico documento a função nao funciona pq?

Bom Dia, muito bom este código; porém gostaria de saber se você poderia me ajudar fazer com que no link eu passe 2 informações?

Exemplo: id & cod

e onde está o código da janela, coloquei um include recebendo os 2 códigos?

Desde já agradeço!!!

Olá, gostaria de saber como faço para fazer a janela pop-up carregar na abertura do site, em vez de ser via click.

Obrigado.

como faço pra abrir uma dessas janelas ao carregar a página? que código devo colocar no onLoad do Body?

Excelente Artigo!

Abraços!!!

Gostei do código e implementei através de um select ao invés de um . no firefox funcionou perfeitamente porém no IE6 quando o modal entra…o select permanece na tela…existe alguma forma de “matar” isso?

O teu site está bem legal, mas só precisa aumentar o espaço entre as linhas dos paragráfos, muita informação concentrada, legibilidade zero com esse fundo escuro!

Como colocar barra de rolagens na Janela MOdal para que eu possa inserir textos maiores e o leitor possa rolar. Aguardo resposta é Urgt

Tem como colocar várias em uma só página? como?

Boa tarde, quando adorei esse tuto, era exatamente o que eu procurava, porém estou com uma dúvida, pois quando coloco mais de um link modal ex: dialog; dialog2; dialog3, o dialog segue a configuração feita no css ja as demais nao, poderia me ajudar?

Modal centralizado na vertical e horizontal

Olá galera. Verifiquei uma coisa chatinha nesse script jquery, é que se a pagina tiver barra de rolagem e o link estiver na parte inferior da pagina. Eu tinha resolvido isso trocando o atributo position da div #boxes de absolute para fixed. Funcionou perfeitamente no Firefox e outros navegadores de compilação similar, porém no Internet Explorer ainda assim apresentava erro na aparição da janela modal. Seguindo o conselho Fernando e do Adriano Mota, adaptei o script para que acontecesse o seguinte.
Quando clicado no link, irá aparecer na tela a janela modal centralizada verticalmente e horizontalmente, idependente do navegador e independente da posição do link na página, quando a janela modal estiver aberta e você rolar a pagina para baixo, ela permanecerá em vista acompanhando a rolagem da página, e ao clicar fora da janela modal ou no botão fechar dela, um efeito fadeOut acontecerá.

O script completo ficou assim:

$(document).ready(function() {$(‘a[name=modal]‘).click(function(e) {e.preventDefault();var id = $(this).attr(‘href’);var maskHeight = $(document).height();var maskWidth = $(window).width();$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});$(‘#mask’).fadeIn(1);$(‘#mask’).fadeTo(“slow”,0.5);var left = 0;var top = 0;var winH = $(window).height();var winW = $(window).width();var dialogHeight = $(“#dialog”).height();var dialogWidth = $(“#dialog”).width();if ($.browser.msie) {left = document.body.scrollLeft || document.documentElement.scrollLeft;top = document.body.scrollTop || document.documentElement.scrollTop;} else {left = window.pageXOffset;top = window.pageYOffset;}var topW = top + winH/2- dialogHeight/2;var leftW = left + winW/2- dialogWidth/2;$(id).css(‘top’, topW);$(id).css(‘left’, leftW);$(id).fadeIn(1000); });$(‘.window .close’).click(function(e){e.preventDefault();$(‘#mask’).fadeOut(1000);$(‘.window’).fadeOut(1000);});$(‘#mask’).click(function(){$(this).fadeOut(1000);$(‘.window’).fadeOut(1000);});});

Lembrando que na folha de estilo css você deve alterar a div #boxes .window, para o seguinte:
#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

E a div #boxes .dialog , e indico controlar o tamanho da janela modal nesta div, com os atributos
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
onde Width e Height você controlará o tamanho, indico usarem porcentagem.

Pessoal adorei o efeito, é bem simples e facil de manipular, mas estou com dificuldade em uma coisa queria que a modal fechasse depois de alguns segundos… poderiam me ajudar???

Como abrir janela lightbox ao entrar no site

Pessoal,
Segue o código para iniciar a página sem o uso de um botão,
carregando a modal ao entrar no site.

function openModal(id) {

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});

//transition effect
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”, 0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css(‘top’, winH / 2 – $(id).height() / 2);
$(id).css(‘left’, winW / 2 – $(id).width() / 2);

//transition effect
$(id).fadeIn(2000);

$(‘.window .modalClose’).click(function (e) {
e.preventDefault();

$(‘#mask’).hide();
$(‘.window’).hide();
});

$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});

}

$(document).ready(function() {

$(‘a[name=modal]‘).click(function(e) {
//Cancel the link behavior
e.preventDefault();
openModal($(this).attr(‘href’));
});

openModal(‘#dialog’);

});

Olá, gostaria de saber como implementar este efeito que você fez no tópico “5. Efeitos Adicionais”, no qual você clica no link e a página desce até o início do texto que você deseja, no caso, desceu até um comentário que mostra “Como abrir janela lightbox ao entrar no site”. Obrigado !

Gostaria de saber se é possível incluir uma LightBox com o conteúdo de CURTIR do Facebook em meu blog.

Agradeço desde já.

Olá pessoal estou tentanto colocar video e nao consigo,
me envia alguma dica. Obrigado

hoelzcarol

Como faço para ativar essa funcao?
tentei utilizar ela, mas nao consegui.
preciso da janela modal com opcao CURTIR do Facebook.
que se abra assim que abrir a pagina inicial.

Obrigado.

Como faço pra carregar uma janela modal com informaçoes utilizando o metódo GET no link clicado???

Obrigado,
fico no aguardo!!!