How to load database content into Bootstrap modal window?

Question

I am learning php and I ended up getting a question, that I do not know very well solve, my question is the following: How can I pull data from the database to appear in the modal the result of the line referring to that id? Better said: When I click the button that leads to the modal, it brings product information referring to the id that was clicked.

Line that calls the modal

<td><a href="#" class="text-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Visualizar</a></td>

SELECT of products

<!-- Coluna 01-2 -->
            <div class="col-md-6">
                <!-- Tabela - Visualização de Informações ao BD -->
                <table class="table caption-top">
                    <caption>Lista de Informações</caption>
                    <thead>
                        <tr class="text-center">
                            <th scope="col">#</th>
                            <th scope="col">Foto do Produto</th>
                            <th scope="col">Nome do Produto</th>
                            <th scope="col">Edição</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Mostrar - Direcionado do Banco de Dados - Produtos -->
                        <?php
                        //Inicio
                        $select = 'SELECT * FROM tb_produtos ORDER BY id_produto DESC LIMIT 4';
                        $contador = 1;
                        try{
                            $resultado = $con->prepare($select);
                            $resultado->execute();

                            $consulta = $resultado->rowCount();
                            if($consulta>0){
                                while($mostrar = $resultado->FETCH(PDO::FETCH_OBJ)){
                        ?>
                        <tr class="text-center">
                            <th scope="row">0<?php echo $contador++; ?></th>
                            <td><a href="#" class="text-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Visualizar</a></td>
                            <td><?php echo $mostrar->nome_produto; ?></td>
                            <td>
                                <a href="index.php?acao=editar-produto&idup=<?php echo $mostrar->id_produto; ?>" class="link-tira-sublinhado">
                                    <button class="btn btn-primary">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                </a>
                                <a href="paginas/apagar-produto.php?idDel=<?php echo $mostrar->id_produto;?>" onclick="return confirm('Deseja apagar o produto [<?php echo $mostrar->nome_produto; ?>]?')" class="link-tira-sublinhado">
                                    <button class="btn btn-danger">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </a>
                                <a href="#" class="link-tira-sublinhado" data-bs-toggle="modal" data-bs-target="#exampleModal1">
                                    <button class="btn btn-secondary">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </a>
                            </td>
                        </tr>
                        <?php
                        //Fim
                    }
                }else{ 
                    ?>
                      <!-- Aviso - Alerta de Ausência de Produtos -->
                      <div class="alert alert-danger d-flex align-items-center" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                        </svg>
                        <div>
                            Não há dados cadastrados!
                        </div>
                      </div>
                      <!-- Aviso - Alerta de Ausência de Produtos -->
                    <?php

                }
            }catch(PDOException $e){
                echo 'ERRO DE SELECT DO PDO: '.$e;
            }
                        ?>
                        <!-- Mostrar - Direcionado do Banco de Dados - Produtos -->
                    </tbody>
                </table>
                <!-- Tabela - Visualização de Informações ao BD -->
            </div>
            <!-- Coluna 01-2 -->

Modal

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelleby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- Título da Apresentação da Foto - Modal 01 -->
                <h5 class="modal-title" id="exampleModalLabel">Macarrão</h5>
                <!-- Título da Apresentação da Foto - Modal 01 -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- Apresentação da Foto -->
            <div class="modal-body">
                <!-- Row - Apresentação da Foto -->
                <div class="row">
                    <!-- Coluna 01 - Apresentação da Foto -->
                    <div class="col-md-4 text-center"></div>
                    <!-- Coluna 01 - Apresentação da Foto -->

                    <!-- Coluna 02 - Apresentação de Foto -->
                    <div class="col-md-12 text-center">
                        <!-- Imagem - Direcionada pelo banco de dados -->
                        <img src="imagens/macarrao.png" width="50%">
                        <!-- Imagem - Direcionada pelo banco de dados -->
                    </div>
                    <!-- Coluna 02 - Apresentação da Foto -->

                    <!-- Coluna 03 - Apresentação da Foto -->
                    <div class="col-md-4 text-center"></div>
                    <!-- Coluna 03 - Apresentação da Foto -->
                </div>
                <!-- Row - Apresentação da Foto -->
            </div>
            <div class="modal-footer">
            <!-- Apresentação da Foto -->
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal 01 - Visualizar Foto do Produto -->