За последние 24 часа нас посетили 17709 программистов и 1627 роботов. Сейчас ищут 1237 программистов ...

модальное окно с соотвествующим id

Тема в разделе "JavaScript и AJAX", создана пользователем Ethna, 11 мар 2018.

  1. Ethna

    Ethna Новичок

    С нами с:
    12 окт 2015
    Сообщения:
    2
    Симпатии:
    0
    Всем здравствуйте! Есть список тем, которые выводятся циклом на php на веб-странице. (Картинка+название) Нужно чтобы при нажатии на на картинку выходило модальное окно с таким же id как и у нажатой темы, но при нажатии открывается пустое модальное окно
    Файл index.php
    PHP:
    1. <html>
    2. <body>
    3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    4.         <script src="temp/default/js/bootstrap.min.js"></script>
    5.         <script src="temp/default/js/SmoothScroll.js"></script>
    6.         <script src="temp/default/js/theme-scripts.js"></script>
    7.                 <!---<link href="temp/default/css/bootstrap.min.css" rel="stylesheet">--->
    8.                 <link href="temp/default/css/bootstrap.css" rel="stylesheet">
    9.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    10.      
    11.      
    12.      
    13.  
    14.      
    15.      
    16.  
    17. <?php
    18. require_once("class/config.class.php");
    19. require_once("class/database.class.php");
    20. require_once("class/templater.class.php");
    21. require_once("class/templater.class.php");
    22. require_once("json/index.php");
    23. $tmp = new Templater();
    24. $db = new DataBase();
    25.  
    26.  
    27.  
    28. $data = array(
    29.     "{TITLE}" => "Переводчик в Вэньчжоу",
    30.  
    31. );
    32.  
    33. {include 'temp/default/header.tpl';}
    34.  
    35.  
    36. {include 'temp/default/services.tpl';}
    37.  
    38. echo "<section id='portfolio'>";
    39.             echo "<div class='container'>";
    40.             echo "<div class='row'>";
    41.                 echo "<div class='col-lg-12 text-center'>";
    42.                     echo "<div class='section-title'>";
    43.                         echo "<h2>Тематики</h2>";
    44.                         echo"<p>У нас есть большой опыт в сфере контроля качества по чжечжянской провинции.</p>";
    45.                     echo "</div>";
    46.                 echo "</div>";
    47.                 echo "</div>";
    48. $counter = 0;
    49.         $db = mysqli_connect("localhost", "perevodchik", "winston1945", "wenzhoutran");
    50.             $result = mysqli_query($db, "SELECT * FROM tbl_topic     ORDER BY id DESC");
    51.     $counter = 0;
    52.     while ($row = mysqli_fetch_array($result)) {
    53.  
    54.         if ($counter%2==0){
    55.             print "<div class='row row-0-gutter'>";
    56.          
    57.         }
    58.      
    59.         echo "<div class='col-md-6 col-0-gutter'>";
    60.         echo "<div class='ot-portfolio-item'>";
    61.         echo "<figure class='effect-bubba';>";
    62.         echo "<img class='img-responsive'  src='wtadmin/topics/uploads/".$row['picProfile']."'/>";
    63.         echo "<figcaption>";
    64.         echo "<h2>".$row['topic']."</h2>";
    65.                             echo    "<a href='#' data-toggle='modal' data-target='#Modal-1' >Больше информации</a>";
    66.                             echo    "</figcaption>";
    67.                         echo "</figure>";
    68.                     echo "</div>";
    69.                 echo "</div>";
    70.              
    71.              
    72.                 if ($counter%2)
    73. {  
    74. print "</div>";
    75.  
    76. }
    77.  
    78.          
    79.      
    80.  
    81.     }
    82.         echo "</section>";
    83.          
    84. {include 'temp/default/languages.tpl';}
    85.              
    86. {include 'temp/default/footer.tpl';}
    87.  
    88. print "<div class='modal fade' id='Modal-1' tabindex='-1' role='dialog' aria-labelledby='Modal-label-1'>";
    89.         echo    "<div class='modal-dialog' role='document'>";
    90.             echo    "<div class='modal-content'>";
    91.                     echo "<div class='modal-header'>";
    92.                         echo "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>";
    93.                         echo "<span aria-hidden='true'>&times</span>"; echo"</button>";
    94.                         echo "<h4 class='modal-title' id='Modal-1'>".$row['topic']."</h4>";
    95.                     echo "</div>";
    96.                     echo "<div class='modal-body'>";
    97.                         /*echo "<img src='".$row['picProfile']."' class='img-responsive' />";*/
    98.                      
    99.                     echo     "<p>".$row['description']."</p>";
    100.                     echo  "</div>";
    101.                     echo  "<div class='modal-footer'>";
    102.                         echo "<button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button>";
    103.                 echo  "</div>";
    104.                     echo  "</div>";
    105.                         echo  "</div>";
    106.                         if ($counter%1){
    107.                         print  "</div>"; }
    108.  
    109.  
    110. ?>
    111.  
    112.  
    113.  
    114.  
    115.  
    116. <script>
    117.     /*must apply only after HTML has loaded */
    118.     $(document).ready(function () {
    119.         $('#topic').on('show.bs.modal', function(e) {
    120.             /* get data written in data-person-name field */
    121.             var topic = $(e.relatedTarget).data('topic');
    122.             /* append that to form our service url */
    123.             var jqxhr = $.getJSON("http://localhost/json/index.php?topic="+ topic, function(json) {
    124.                 /* this function is called when request finishes. The response is stored in this json object*/
    125.                 /* we get the div that holds the header and put there the value of the "title" element */
    126.                 $('#Modal-1 .modal-header .modal-title').html(json["topic"]);
    127.                 /* we get the modal-body div and put the content of the "data" key in our php */
    128.                 $('#Modal-1 .modal-body').html(json["data"]);
    129.             });
    130.         });
    131.     });
    132. </script>;
    133.  
    134.  
    135. </body>
    136. </html>
    Файл json/index.php


    PHP:
    1.     $topic = $_GET["tbl_topic"];
    2.     $description = $_GET["description"];
    3.     $text= array('title' => $topic . '', 'data' => '<em>.' '. $description .'</em>.'');
    4.     echo json_encode($text, JSON_FORCE_OBJECT);
     
    #1 Ethna, 11 мар 2018
    Последнее редактирование: 11 мар 2018