-1

Olá, estou praticando minhas habilidades de programação, e encontrei um entrave; Tentei colocar uma variável PHP que o usuário digitaria dentro de um modal, somente para teste, porém, tenho encontrado grande dificuldade em fazê-lo. Não precisaria ser nada complexo ou muito trabalhado, apenas um modal que exibisse uma variável sem importância, obrigado desde já.

1

1 Resposta 1

1

Primeiro pegamos a biblioteca do Bootstrap, neste caso peguei as CDNs:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

Faça um botão para abrir seu modal passando parâmetros do PHP:

<?php 
$conteudo = array(
'titulo'=>"Título de exemplo 1",
'texto'=>'Conteúdo feito dentro do modal 1',
'id'=>1,
'titulo_botao_close'=>'Fechar',
'titulo_botao_open'=>'Abrir Modal'
); ?>
<button type="button" class="btn btn-primary btn-lg" data-id="<?php echo $conteudo['id']; ?>" data-toggle="modal" data-content="<h2><?php echo $conteudo['titulo']; ?></h2><p><?php echo $conteudo['texto']; ?></p>" data-title="<?php echo $conteudo['titulo']; ?>" data-target="#element" data-button="<?php echo $conteudo['titulo_botao_close']; ?">
    <?php echo $conteudo['titulo_botao_open']?>
</button>

Agora faça o modal:

<!-- Modal -->
   <div class="modal fade" id="element" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Título</h4>
         </div>
         <div class="modal-body">
            Conteúdo
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default mybutton" data-dismiss="modal">Fechar</button>  
         </div>
       </div>
     </div>
   </div>

Agora façamos os atributos dinâmicos que serão atribuidos ao modal via AJAX (jQuery):

$(document).ready(function() {

    $('#element').on('show.bs.modal', function(event) {
        $target = {};
        ['id','button','title','content'].forEach(function(value, key) {
            $target[value] = $(event.relatedTarget).data(value);
        });
        //mantemos valores defaults
        $(".close-changes").text('Fechar');
        $(".modal-title").text('untitled');
        $(".modal-body").html('não há textos');
        if ($target.id == 1) {
             //se a id for 1, recebe os atributos...
            $(".close-changes").text($target.button);
            $(".modal-title").text($target.title);
            $(".modal-body").html($target.content);
        }
 });
});

Aqui tem um jsfiddle de múltiplos elementos para modal: http://jsfiddle.net/Lyp615jw/5/

Se você não deseja utilizar esta implementação por falta de habilidade com JS, você pode usar esse modal, que foi feito através do efeito transition, que utiliza somente CSS Less: http://codepen.io/maccadb7/pen/nbHEg

1
  • Entendi, mas eu ainda não comecei a aprender JS nem Jquery, será que não teria como fazê-lo apenas com PHP, HTML e CSS? Sem querer abusar da sua boa vontade, claro.
    – J. Doe
    30/08/2015 às 15:40

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 .