Janela Modal
25/02/2014
0
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.
Posts
26/02/2014
Paulo Sérgio
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 :)
26/02/2014
Joel Rodrigues
$('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.
26/02/2014
Celiol.
27/02/2014
Celiol.
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.
27/02/2014
Celiol.
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.
27/02/2014
Joel Rodrigues
27/02/2014
Celiol.
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.
28/02/2014
Celiol.
Mas vou tentando aqui.
Abraços Miller.
28/02/2014
Joel Rodrigues
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.
27/05/2014
Alanpccs
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.
27/05/2014
Celiol.
Delivery-TI.
19/10/2015
Robson Conceição
Abraço!
Clique aqui para fazer login e interagir na Comunidade :)
