Janela Modal
Galera e o seguinte estou fazendo uma janela modal e deu tudo certo mas eu tenho 10 botoes.
mas nao sei como passar ele para o javascript e ai ele pega sempre o primeiro os outros nao funciona. olhe o codigo.
javascript:
$(document).ready(function () {
$('a[name=modal]').click(function (e) { ===>> aqui galera onde ele pega o valor para mostrar na janela mas ele pega sempre do mesmo como faço
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
});
olha como esta o primeiro codigo html.
<fieldset class="fil1">
<img src="animals/image1.jpg" class="serv1" alt="" width="85px" height="85px"/>
<p class="text_serv1"><span class="subtitulo">Atualizações</span><br/><br/>
Com as frequentes atualizações de softwares e plugins, quem nao atualiza seu sistema
semanalmente pode ter uma surpresa...
</p>
<%-- conteudo da janela modal --%>
<a href="#dialog" name="modal" class="span">ler + </a> ===>> aqui é onde esta o model que ele chama galera
<div id="boxes"><br/>
<%-- personalizando a janela --%>
<div id="dialog" class="window">
<p class="subtitulo">Atualizações</p>
<a href="#" class="close">Fechar[x]</a><br/><br/>
<p class="text_jan"> Aqui sera o conteudo exibido na janela...</p>
</div><br/>
<div id="mask"></div>
</div>
</fieldset>
so para esclarecer eu tenho 10 modais so nao sei como chamar eles a cada click, no meu ele traz sempre o primeiro.
Obrigado Miller.
mas nao sei como passar ele para o javascript e ai ele pega sempre o primeiro os outros nao funciona. olhe o codigo.
javascript:
$(document).ready(function () {
$('a[name=modal]').click(function (e) { ===>> aqui galera onde ele pega o valor para mostrar na janela mas ele pega sempre do mesmo como faço
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
});
olha como esta o primeiro codigo html.
<fieldset class="fil1">
<img src="animals/image1.jpg" class="serv1" alt="" width="85px" height="85px"/>
<p class="text_serv1"><span class="subtitulo">Atualizações</span><br/><br/>
Com as frequentes atualizações de softwares e plugins, quem nao atualiza seu sistema
semanalmente pode ter uma surpresa...
</p>
<%-- conteudo da janela modal --%>
<a href="#dialog" name="modal" class="span">ler + </a> ===>> aqui é onde esta o model que ele chama galera
<div id="boxes"><br/>
<%-- personalizando a janela --%>
<div id="dialog" class="window">
<p class="subtitulo">Atualizações</p>
<a href="#" class="close">Fechar[x]</a><br/><br/>
<p class="text_jan"> Aqui sera o conteudo exibido na janela...</p>
</div><br/>
<div id="mask"></div>
</div>
</fieldset>
so para esclarecer eu tenho 10 modais so nao sei como chamar eles a cada click, no meu ele traz sempre o primeiro.
Obrigado Miller.
Celiol.
Curtidas 0
Respostas
Paulo Sérgio
25/02/2014
Cara, eu uso um plugin chamado "Simple Modal" ótimo e de fácil implementação....
Sugiro o seguinte, onde está
crie um ID no botão e chame ele pela ID e mude o click para live...
Com isso creio que resolverá seu problema,
vc pode criar uma ID única para todas as janelas modal e criar uma CLASS por exemplo que vc pode usar para distinguir uma das outras e recuperando seu valor com o
vc pode usar o "if" "else" para abrir o conteúdo específico ou até mesmo fazer uma requisição ajax em outra página
espero ter ajudado :)
Sugiro o seguinte, onde está
$('a[name=modal]').click(function
crie um ID no botão e chame ele pela ID e mude o click para live...
$("#idbotao").live('click', function
Com isso creio que resolverá seu problema,
vc pode criar uma ID única para todas as janelas modal e criar uma CLASS por exemplo que vc pode usar para distinguir uma das outras e recuperando seu valor com o
var nomevariavel $(this).attr('class');
vc pode usar o "if" "else" para abrir o conteúdo específico ou até mesmo fazer uma requisição ajax em outra página
espero ter ajudado :)
GOSTEI 0
Joel Rodrigues
25/02/2014
Analise as seguintes linhas de código:
Você está tratando o evento click de todos os links (<a>) que tenha name=modal. Não seria o caso de usar o atributo class ao invés do name?
Exiba o conteúdo dessa variável em um alert para testar se está pegando o que você precisa.
Faça esses testes e nos diga o resultado.
$('a[name=modal]').click(function (e)Você está tratando o evento click de todos os links (<a>) que tenha name=modal. Não seria o caso de usar o atributo class ao invés do name?
var id = $(this).attr('href');Exiba o conteúdo dessa variável em um alert para testar se está pegando o que você precisa.
Faça esses testes e nos diga o resultado.
GOSTEI 0
Celiol.
25/02/2014
ola obrigado pela ajuda esta sim cara mas como disse ele tras apenas o primeiro modal os outros tambem funcionam mas com o valor do primeiro. ja tenti com a class com id nada deu certo. vou colocar o codigo todo so pra voce ter uma ideia.
GOSTEI 0
Celiol.
25/02/2014
Cara, eu uso um plugin chamado "Simple Modal" ótimo e de fácil implementação....
Sugiro o seguinte, onde está
crie um ID no botão e chame ele pela ID e mude o click para live...
Com isso creio que resolverá seu problema,
vc pode criar uma ID única para todas as janelas modal e criar uma CLASS por exemplo que vc pode usar para distinguir uma das outras e recuperando seu valor com o
vc pode usar o "if" "else" para abrir o conteúdo específico ou até mesmo fazer uma requisição ajax em outra página
espero ter ajudado :)
Sugiro o seguinte, onde está
$('a[name=modal]').click(function
crie um ID no botão e chame ele pela ID e mude o click para live...
$("#idbotao").live('click', function
Com isso creio que resolverá seu problema,
vc pode criar uma ID única para todas as janelas modal e criar uma CLASS por exemplo que vc pode usar para distinguir uma das outras e recuperando seu valor com o
var nomevariavel $(this).attr('class');
vc pode usar o "if" "else" para abrir o conteúdo específico ou até mesmo fazer uma requisição ajax em outra página
espero ter ajudado :)
Então cara eu fiz como você falou só não entendi direito essa lógica para usar um if else, pois com a class de mesmo nome pra todos ele deu erro também.
GOSTEI 0
Celiol.
25/02/2014
Cara, eu uso um plugin chamado "Simple Modal" ótimo e de fácil implementação....
Sugiro o seguinte, onde está
crie um ID no botão e chame ele pela ID e mude o click para live...
Com isso creio que resolverá seu problema,
vc pode criar uma ID única para todas as janelas modal e criar uma CLASS por exemplo que vc pode usar para distinguir uma das outras e recuperando seu valor com o
vc pode usar o "if" "else" para abrir o conteúdo específico ou até mesmo fazer uma requisição ajax em outra página
espero ter ajudado :)
Sugiro o seguinte, onde está
$('a[name=modal]').click(function
crie um ID no botão e chame ele pela ID e mude o click para live...
$("#idbotao").live('click', function
Com isso creio que resolverá seu problema,
vc pode criar uma ID única para todas as janelas modal e criar uma CLASS por exemplo que vc pode usar para distinguir uma das outras e recuperando seu valor com o
var nomevariavel $(this).attr('class');
vc pode usar o "if" "else" para abrir o conteúdo específico ou até mesmo fazer uma requisição ajax em outra página
espero ter ajudado :)
Então cara eu fiz como você falou só não entendi direito essa lógica para usar um if else, pois com a class de mesmo nome pra todos ele deu erro também.
GOSTEI 0
Joel Rodrigues
25/02/2014
Quando colocar o código todo, coloque entre as tags CODE, usando o botão na parte inferior da tela.
GOSTEI 0
Celiol.
25/02/2014
ola galera entao meu codigo ficou assim:
javascript
e aqui estao minhas modais sao dez mas vou colocar apenas essas pra voces terem uma ideia como estou trabalhando minhas class, id.
bem galera é isso esta tudo certo aqui so nao sei como fazer para mostrar as modais da 2 em diante, pois quando clico no botao, ele chama sempre a modal 1.
javascript
<!-- inicio do conteudo central de servicos -->
<div class="center_servico"><br/>
<script type="text/javascript">
$(document).ready(function() {
$('a[name=modal]').live('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(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
e aqui estao minhas modais sao dez mas vou colocar apenas essas pra voces terem uma ideia como estou trabalhando minhas class, id.
<div class="servicos">
<fieldset class="fil1">
<img src="animals/image1.jpg" class="serv1" alt="" width="85px" height="85px"/>
<p class="text_serv1"><span class="subtitulo">Atualizações</span><br/><br/>
Com as frequentes atualizações de softwares e plugins, quem nao atualiza seu sistema
semanalmente pode ter uma surpresa...
</p>
<%-- conteudo da janela modal --%>
<a href="#dialog" name="modal" class="icon active-icon">ler + </a>
<div id="boxes"><br/>
<%-- personalizando a janela --%>
<div id="dialog" class="window">
<p class="subtitulo">Atualizações</p>
<a href="#" class="close" title="Fechar">X</a><br/><br/>
<p class="text_jan"> Aqui sera o conteudo exibido na janela...</p>
</div><br/>
<div id="mask"></div>
</div>
</fieldset>
<fieldset class="fil2">
<img src="animals/image2.jpg" class="serv2" alt="" width="85px" height="85px"/>
<p class="text_serv1"><span class="subtitulo">Consultoria</span><br/><br/>
Com as frequentes atualizações de softwares e plugins, quem nao atualiza seu sistema
semanalmente pode ter uma surpresa...
</p>
<%-- conteudo da janela modal --%>
<a href="#dialog" name="modal2" class="icon">ler + </a>
<div id="boxes2"><br/>
<%-- personalizando a janela --%>
<div id="dialog2" class="window2">
<p class="subtitulo">Consultoria</p>
<a href="#" class="close">Fechar[x]</a><br/><br/>
<p class="text_jan"> Aqui sera o conteudo exibido na janela...</p>
</div><br/>
<div id="mask2"></div>
</div>
</fieldset>
<fieldset class="fil1">
<img src="animals/image3.jpg" class="serv3" alt="" width="85px" height="85px"/>
<p class="text_serv1"><span class="subtitulo3">Desenvolvimento de Aplicações</span><br/><br/>
Com as frequentes atualizações de softwares e plugins, quem nao atualiza seu sistema
semanalmente pode ter uma surpresa...
</p>
<%-- conteudo da janela modal --%>
<a href="#dialog" name="modal3" class="icon">ler + </a>
<div id="boxes3"><br/>
<%-- personalizando a janela --%>
<div id="dialog3" class="window3">
<p class="subtitulo">Desenvolvimento de Aplicações</p>
<a href="#" class="close">Fechar[x]</a><br/><br/>
<p class="text_jan"> Aqui sera o conteudo exibido na janela...</p>
</div><br/>
<div id="mask3"></div>
</div>
</fieldset>
</div>
bem galera é isso esta tudo certo aqui so nao sei como fazer para mostrar as modais da 2 em diante, pois quando clico no botao, ele chama sempre a modal 1.
GOSTEI 0
Celiol.
25/02/2014
cara ja achei o erro e arrumei muito obrigado. agora so estou querendo adicionar o evento para ele ir para o topo no mesmo botão, porque quando o cara selecionas os botões que estão no fim da pagina ele abre a janela modal la em cima mas ai o usuário que tem que ir pra cima. Se souber e puder ajudar agradeço.
Mas vou tentando aqui.
Abraços Miller.
Mas vou tentando aqui.
Abraços Miller.
GOSTEI 0
Joel Rodrigues
25/02/2014
Opa, Miller. Foi mal a demora.
A ideia aí é posicionar a janela modal de acordo com o topo da janela do browser, e não do documento. Vou ver se consigo aqui e lhe passo.
A ideia aí é posicionar a janela modal de acordo com o topo da janela do browser, e não do documento. Vou ver se consigo aqui e lhe passo.
GOSTEI 0
Celiol.
25/02/2014
ha beleza nao sei como é esse ai mas vau cara.
GOSTEI 0
Alanpccs
25/02/2014
cara ja achei o erro e arrumei muito obrigado. agora so estou querendo adicionar o evento para ele ir para o topo no mesmo botão, porque quando o cara selecionas os botões que estão no fim da pagina ele abre a janela modal la em cima mas ai o usuário que tem que ir pra cima. Se souber e puder ajudar agradeço.
Mas vou tentando aqui.
Abraços Miller.
Mas vou tentando aqui.
Abraços Miller.
E como conseguiu solucionar? Estou enfrentando esse mesmo problema. Minha janela modal mostra sempre o conteudo da primeira janela.
GOSTEI 0
Celiol.
25/02/2014
Opa cara blz, entao coloca aqui o codigo que eu analiso e te dou uma resposta. Mas pra adiantar voce esta programando em asp? ou html?
Delivery-TI.
Delivery-TI.
GOSTEI 0
Robson Conceição
25/02/2014
Boa...será que poderia dizer qual era o problema e como arrumou? Estou com um problema semelhante.
Abraço!
Abraço!
GOSTEI 0