First we took the Bootstrap library, in which case I got the 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><scripttype="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
MakeabuttontoopenyourmodalbypassingPHPparameters:
<?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>
Now do the following:
<!-- 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>
Now let's make the dynamic attributes that will be assigned to the 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);
}
});
});
Here is a jsfiddle of multiple elements for modal:
link
If you do not want to use this implementation because of lack of skill with JS, you can use this modal, which was done through the transition effect, which uses only CSS Less:
link