F�rum Janela Modal #471234

25/02/2014

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.

Celiol.

Curtir t�pico

+ 0

Responder

Posts

26/02/2014

Paulo S�rgio

Cara, eu uso um plugin chamado "Simple Modal" �timo e de f�cil implementa��o....
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 :)

Responder

Gostei + 0

26/02/2014

Joel Rodrigues

Analise as seguintes linhas de c�digo:

$('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.

Responder

Gostei + 0

26/02/2014

Celiol.

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.

Responder

Gostei + 0

27/02/2014

Celiol.

Cara, eu uso um plugin chamado "Simple Modal" �timo e de f�cil implementa��o....
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

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.

Responder

Gostei + 0

27/02/2014

Celiol.

Cara, eu uso um plugin chamado "Simple Modal" �timo e de f�cil implementa��o....
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

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.

Responder

Gostei + 0

27/02/2014

Joel Rodrigues

Quando colocar o c�digo todo, coloque entre as tags CODE, usando o bot�o na parte inferior da tela.

Responder

Gostei + 0

27/02/2014

Celiol.

ola galera entao meu codigo ficou assim:

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.

Responder

Gostei + 0

28/02/2014

Celiol.

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.

Responder

Gostei + 0

28/02/2014

Joel Rodrigues

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.

Responder

Gostei + 0

05/03/2014

Celiol.

ha beleza nao sei como � esse ai mas vau cara.

Responder

Gostei + 0

27/05/2014

Alanpccs

E como conseguiu solucionar? Estou enfrentando esse mesmo problema. Minha janela modal mostra sempre o conteudo da primeira janela.

Responder

Gostei + 0

27/05/2014

Celiol.

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.

Responder

Gostei + 0

19/10/2015

Robson Concei��o

Boa...ser� que poderia dizer qual era o problema e como arrumou? Estou com um problema semelhante.
Abra�o!

Responder

Gostei + 0