How to display data from a query in Modal?

On this button if you use type="button" class="fazQuery" you can use query via AJAX in javascript example:

    $(".fazQuery").on('click', function() {

        $("#modalId").modal('show');
        $("#modalBody").html("A carregar...");
        $.ajax({
            url: "urlProcura.php",
            data: {query: "Texto a procurar??" },
            success: function(resultado) {
                 $("#modalBody").html(resultado);
            }, 
            error: function(erro, resultado) {
               alert("Ocorreu um erro tente novamente.");
            }
        });
    });

In case you are using a bootstrap modal the function to open the modal is modal('show')

Modal example to use:

       <!-- Modal -->
<div class="modal fade" id="modalId" 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">Modal title</h4>
      </div>
      <div class="modal-body" id="modalBody">
           A carregar...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

On my site I use the following codes:

  

In this first situation I use the tag, where I save the id to make the query. see:

<a href="#" title="Visualizar Pedido Por Inteiro" data-toggle="modal" data-target="#modal-pedidos" data-id="<?php echo $idPedidos; ?>" onclick="mostrarModal()"><span class="fa fa-eye fa-2x" style="margin-INNER: 10px;"></span></a>

  

It is important that you use the data-id, as it may occur, confusion when sending the identifier code in the query, in my case the id.

     

Get the order id sent by onClick, load the contents of the_php_php.php_messages_id with the received id and open the modal

function mostrarModal(){
        $(document).ready(function() {
          $('#modal-pedidos').on('show.bs.modal', function(e) {
            var idPedidos = $(e.relatedTarget).data('id');
            var url = "../../componentes/php/ff_pedidos_detalhados_php.php";
            $('.modal-content').load(url, {idPedidos:idPedidos},
            function(resultado){
             $('#myModal').modal({show:true});
            });
          });
        });
      }

  

Note: it is worth remembering that ff_pedidos_detailed is where the selects are, and all the missing structure of the modal, ie you have to leave in the page that you want to open the modal, the "modal skeleton", see how it is mine:

      <!-- ABRE A O CORPO DA MODAL QUE É CARREGADA PELA PEDIDOS_DETALHADOS_PHP.PHP -->
      <div class="modal fade validate" id="modal-pedidos" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
          <div class="modal-content">
            <!-- AQUI É INSERIDO O CÓDIGO TRAZIDO PELA CONSULTA -->
          </div>
        </div>
      </div>
      <!-- FECHA MODAL -->