Load Link in Modal

Question

Run the code - The explanation ta on execution. then read the code

document.getElementById("edt").style = "block";
$(document).ready(function() {       
  $("#LinkChamar").click(function() {
    $("#CarregarEmDIV").modal();     
    });

});

.modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0; }
  .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto; }

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none; }
  .modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -25%); }
  .modal.show .modal-dialog {
    transform: translate(0, 0); }
    
    .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  outline: 0; }
  
dialog {
  display: block; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Exemplo Link 1-->

<a href="PaginaPhp.php?PorID=10" id="LinkChamar" data-toggle="modal" data-target="#CarregarEmDIV">Edita Informação do ID 10</a><br>
<!-- Exemplo Link 2-->
<a href="PaginaPhp.php?PorID=50" id="LinkChamar" data-toggle="modal" data-target="#CarregarEmDIV">Edita Informação do ID 50</a>
<!-- PaginaPhp.php?PorID=10 esse link é gerado dinamicamente. TRATA-SE DE INFORMACOES VINDAS DO banco de dados A CONSULTA JA ESTA PRONTA EXPOR-->
<!--MINHA MODAL -->
<div class="modal fade" id="CarregarEmDIV" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="padding:35px 50px;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4><span class="glyphicon glyphicon-lock"></span>Ediçao</h4>
      </div>
      <div id="edt">
Quero saber como coloco para carregar o conteudo do link CLICADO aqui. A consulta ja exibe os dados do jeito que quero dentro de divs. Mais quero ela nesse modal. Copiar o resultado da consulta para essa div.
      </div>
    </div>
  </div>
</div>

Answer 1

First thing is to change the ids repeated id="LinkChamar" for class="LinkChamar". There can’t be the same id on a page in more than one element.

I did not understand the function of this line, besides being incorrect: document.getElementById("edt").style = "block";

Well, making the aforementioned changes, you should take the click by the link class and request via Ajax the value of the respective attribute href, and send the result to div #edt:

$(document).ready(function() {       
   $(".LinkChamar").click(function() {
      $.ajax({
         url: $(this).attr("href"),
         success: function(data){
            $("#edt").html(data);
         }
      });     
   });
});

How are you sent the value of PorID in the Ajax URL, in PHP you receive with:

<?php
$PorID = $_GET['PorID'];
?>