PHP variable inside modal

Question

Hello, I’m practicing my programming skills, and I found a hindrance; I tried to put a PHP variable that the user would type into a modal, just for testing, but I have found it very difficult to do so. It wouldn’t have to be anything complex or hard-working, just a modal that displayed a meaningless variable, thanks in advance.

Answer 1

First we take the library of Bootstrap, in this case I took 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>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

Make a button to open your modal by passing parameters of the 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>

Now do the 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>

Now let’s do 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’s a jsfiddle of multiple elements for modal: http://jsfiddle.net/Lyp615jw/5/

If you don’t want to use this implementation for lack of JS skill, you can use this modal, which was done through the effect Transition, using only CSS Less: http://codepen.io/maccadb7/pen/nbHEg