1

Acredito ser questão de colocar o código no local certo, porém estou quebrando a cabeça e não consigo...

Fiz um teste com o código padrão do BootStrap, onde funciona sobre um botão. Inclusive coloquei as chamadas de dados dentro dele e funcionou.

A questão agora é, minha index retorna valores do banco pelo while:

  while ($posts = mysql_fetch_array($busca)){
                extract($posts);
                ?>

                <div class="col-md-2"  >
                    <div class="item-title">
                        <h6 class="title">

                            <strong>
                                <a href="single.php?id=<?php echo $posts['id']?>" title="<?php echo $posts['titulo']; ?>" >
                                <?php echo $posts['titulo']; ?></a>
                            <strong>
                        </h6>
                    </div><!--Fecha titulo do posts/item-->


                    <div class="item-img" data-toggle="modal" data-target=".bs-example-modal-lg">
                        <a href="single.php?id=<?php echo $posts['id']?>" title="<?php echo $posts['titulo']; ?>" class="thumbnail">
                            <img src="uploads/<?php echo $posts['path'] ?>" title="<?php echo $posts['titulo']; ?>" alt=""  id="blc-img" />
                        </a>
                    </div><!--Fecha Imagem do posts/item-->

                    <div class="item-vist">
                        <h6 class="vist"><small>Visitas <b><?php echo $posts['visitas'] ?></small></b></h6>
                    </div><!--Fecha Visitas do posts/item-->

                </div>
                <?php
                    };
                ?>

Como posso adaptar este código para que ao clicar em um dos itens, ele abra no Modal, e não no single.php? como esta no momento.

Código do modal:`

<button type="button" class="btn btn-primary" data-toggle="modal"    data-target=".bs-example-modal-lg">Large modal</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>`

Não irei modificar o código padrão do Modal(acredito não haver necessidade). Gostaria que ao clicar em um dos itens retornados, ele abra em Modal.

Modal com botão funcionando: inserir a descrição da imagem aqui

Minha ideia é quando clicar no post(aquele abaixo do Catalogo), ela abra da mesmo forma que o do botão.

Agradeço desde já!

9
  • Coloque o modal e o botão que vai chamar o modal dentro do while e os respectivos retornor do banco em cada posição.
    – RFL
    Commented 27/08/2015 às 16:26
  • @RafaelAcioly desculpe, poderia ser um pouco mais especifico? no caso eu não quero usar o botão para chamada do modal, e sim o proprio post como chamada para o modal... Commented 27/08/2015 às 16:29
  • você quer que quando a consulta do banco seja realizada o modal ja apareça?
    – RFL
    Commented 27/08/2015 às 16:34
  • @RafaelAcioly coloquei uma print do modal com botão. A ideal é funcionar quando clicar no post(a capa que esta abaixo da palavra Catalogo) Commented 27/08/2015 às 16:35
  • 1
    A sim, está correto é verdade, eu não havia reparado, mas você tem que enviar uma id para cada elemento do seu laço para que seja carregado dentro do seu modal, senão ele vai sempre carregar só o primeiro elemento div externo do seu modal. Olha esse exemplo: jsfiddle.net/Lyp615jw/5 Commented 27/08/2015 às 18:00

2 Respostas 2

2

Cria uma função em js que você chama ela passando o id do filme, ai essa função chama seu single.php por ajax passando o id e depois carrega o html vindo do single.php dentro do modal e depois abre o modal.

 function carregarItem(id)
    {
        $( ".modal-content" ).load( "single.php", { id: id }, function() {
            ('.bs-example-modal-lg').modal('show');  
        });
    }

Chamada HTML:

<strong>
   <a onclick='carregarItem(<?php echo $posts['id']?>)' title="<?php echo $posts['titulo']; ?>" >
   <?php echo $posts['titulo']; ?></a>
<strong>
7
  • Srs, neste caso a unica alteração seria utilizando a chamada HTML e a function? Sem o uso do código do bootsstrap? Não entendi Commented 27/08/2015 às 17:52
  • Você deve manter o html do seu modal também, porque o js vai atualizar o conteúdo do modal já existente e apos isso, mostrar na tela. Commented 27/08/2015 às 17:55
  • extamente esta parte que fico perdido... o html do modal bootstrap deve ser incluso em qual local? Já coloquei a function dentro do script no head, e já modifiquei a linha do a com onclick Commented 27/08/2015 às 17:58
  • Aonde fica a listagem dos filmes, fora do loop. Commented 27/08/2015 às 17:59
  • Nada acontece... e com o código html para o a onclick, ele perde o "link" e não consigo clicar. Commented 27/08/2015 às 18:03
1

Imagino pelo oq eu entendi que quando clicar nos links você deve fazer uma solicitação ajax para a url no caso para o single.php dai pegar o retorno que deve ser um html de preferencia e jogar dentro da div do modal depois abrir o modal. Agora tem o problema do parametro acho que teria que implementar assim: Exemplo: Seu link:

<strong>
   <a class='linkmodal' id='<?php echo $posts['id']?>' title="<?php echo $posts['titulo']; ?>" >
   <?php echo $posts['titulo']; ?></a>
<strong>

//vinculei a solicitação ajax ao click do a e pego o id na propriedade do elemento

$('a.linkmodal').click(function(){
        $.ajax({
            url: 'single.php',
            data: {id: $(this).attr('id')}
        }).done(function(data) {
            $('div.modal-content').html(data);
        });

//aqui chamar abertura da modal codigo depende do plugin

});
4
  • Opa! Obrigado pelo comentário. Esta parte: //aqui chamar abertura da modal codigo depende do plugin ... vc se refere ao código que coloquei do bootstrap? Commented 27/08/2015 às 17:39
  • Esse comentario se refere a abertura do modal por exemplo "modal.show()" não sei qual plugin vc ta usando. Mas a função do @henriquedpereira ai embaixo ficou mais elegante.
    – Guerra
    Commented 27/08/2015 às 17:41
  • Na verdade como nunca trabalhei com o JS nem JQuery, não sei qual usar... estou tentando adaptar oq encontro no getbootstrap.com/javascript/#modals-methods Commented 27/08/2015 às 17:44
  • Eu editei a resposta dele pra servir direitinho pra tu, acho que ficou mais elegante, mas acredito que das duas formas vão funcionar.
    – Guerra
    Commented 27/08/2015 às 17:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .