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 Resposta
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">×</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
-
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. DoeCommented 30/08/2015 às 15:40