PHP & Ajax, Javascript - Как отображать модальные, когда данные извлекаются в базу данных вместо текста

Question

Как я могу получить данные и отобразить их как модальное всплывающее окно, а не как текст,

и тут возникает проблема, потому что этот код

ошибки

структура базы данных

index.php

    <!-- The Modal -->
<div id="myModal" class="modal">


 ?>


</div>


    <script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "select.php", //create a php for the SELECT STATEMENT
        //data: $("#signin").serialize(), // serializes the form's elements.
        success: function (data) {
            $("#myModal").html(data);
            modal.style.display = "block";
        }
    });

</script>

Вот вторая страница, которая является select.php здесь модал будет извлечен

select.php

<?php 

$link=mysqli_connect("localhost","root","");
mysqli_select_db($link, "autorefresh");

$res = mysqli_query($link,"select * from table1");

while($row=mysqli_fetch_array($res))
{
    echo '  <div class="modal-content">
            <span class="close">&times;</span>
            <p>'.$row["name"]." ".$row["city"].'</p>
          </div>';
}

Answer 1

Вы не определили, что такое modal .... Попробуйте эти строки,

success: function (data) {
            $("#myModal").html(data);
            $("#myModal").slideDown('slow');
        }

Линия $("#myModal").slideDown('slow'); покажет вашу модель с эффектом slideDown. Также вы можете использовать $("#myModal").css('display','block'); для отображения вместо эффекта slideDown.

MODAL POPUP

Для создания modal popup вам необходимо использовать bootstrap. добавьте Boostrap в свой проект, затем попробуйте это,

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

А у тебя javascript,

success: function (data) {
                $("#myModal .modal-body").html(data);
                $("#myModal").modal('show');
            }

В строке $("#myModal").modal('show'); появится модал.