PHP variable within modal

Question

PHP variable within modal

Navigation

#1 by (1 votes)

-1

Hello, I'm practicing my programming skills, and I found a catch; I tried to put a PHP variable that the user would type inside a modal, only for testing, however, I have found it very difficult to do so. It would not have to be anything complex or overworked, just a modal that displayed an unimportant variable, thank you right away.

php html modal

asked by anonymous 28.08.2015 / 14:34

1 answer

SQLite giving "near" CREATE error: syntax error (code 1): "[closed] What could cause the stop in a FOR? (javascript)

score 1 · Answer 1

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">&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 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