Вывести в модальное окно данные, полученные из ajax запроса

Question

Есть ajax запрос:

 function call(id) {
 
    $.ajax({
        method: 'post',
        url: 'request.php', 
        data: {m:id},
 
        success: function(data) {  
           //что тут прописать??
        },
        error:  function(xhr, str){ 
            alert('Возникла ошибка: ' + xhr.responseCode);
        }
    });
};

Получаю ответ от сервера:

 if (isset($_POST['m']) ) {
      $_POST['m']=(int)$_POST['m'];
             $reply=mssql("SELECT name, email, phone  FROM users WHERE ID='{$_POST['m']}'");");
      ob_clean();
  echo json_encode($reply,JSON_UNESCAPED_UNICODE);

Подскажите, как вывести результат в модальное окно? Также нашел стили:

    .modal_div {
    width: 300px;
    height: 300px; 
    border-radius: 5px;
    border: 3px #000 solid;
    background: #fff;
    position: fixed; 
    top: 45%; 
    left: 50%; 
    margin-top: -150px;
    margin-left: -150px; 
    display: none; 
    opacity: 0; 
    z-index: 5; 
    padding: 20px 10px;
}

.modal_close {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}
/* Пoдлoжкa */
#overlay {
    z-index:3; 
    position:fixed; 
    background-color:#000; 
    opacity:0.8; 
    -moz-opacity:0.8; 
    filter:alpha(opacity=80);
    width:100%;
    height:100%; 
    top:0; 
    left:0;
    cursor:pointer;
    display:none; 
}

Форма пока пусть будет такая:

  <div class="modal_div" >
       <h2></h2>
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label>First Name</label>
                <input type="text">
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label>Surname</label>
                <input type="text">
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label>Email</label>
                <input type="text">
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label>Phone</label>
                <input type="text">
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label>Message</label>
                <textarea></textarea>
            </div>
        </div>
    </div>
</div>

Answer 1

Вот пример показа попапа по кнопке. Для этого вам нужно использовать джекверевский метод show. И убрать opacity: 0 из стилей

$(function () {
  $('button').on('click', function () {
    $('.modal_div').show();
  });
});

.modal_div {
  width: 300px;
  height: 300px;
  border-radius: 5px;
  border: 3px #000 solid;
  background: #fff;
  position: fixed;
  top: 45%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
  display: none;
  z-index: 5;
  padding: 20px 10px;
}

.modal_close {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: block;
}


/* Пoдлoжкa */

#overlay {
  z-index: 3;
  position: fixed;
  background-color: #000;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal_div">
  <h2></h2>
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label>First Name</label>
        <input type="text">
      </div>
    </div>

    <div class="col">
      <div class="form-group">
        <label>Surname</label>
        <input type="text">
      </div>
    </div>

    <div class="col">
      <div class="form-group">
        <label>Email</label>
        <input type="text">
      </div>
    </div>

    <div class="col">
      <div class="form-group">
        <label>Phone</label>
        <input type="text">
      </div>
    </div>

    <div class="col">
      <div class="form-group">
        <label>Message</label>
        <textarea></textarea>
      </div>
    </div>
  </div>
</div>

<button>Show popup</button>

БЛОГ НА HUSL

Вывести в модальное окно данные, полученные из ajax запроса

Ответы (1 шт):