Question

我想以弹出形式显示MySQL的结果，例如注释 MySQL查询

$photos=mysql_query("SELECT * FROM photos") | Query 1.
$ph_num=mysql_numrows($photos);
while($row= mysql_fetch_array($photos)) { Open Query1 
echo " <img src='./photos/$row[photos]'> ";

 $comments=mysql_query("SELECT * FROM comments WHERE comment_id='photo_id' ")   | Query2.
 $com_num=mysql_numrows($comments);
while($crow= mysql_fetch_array($comments))  
echo " 
<input type='submit'  data-showpopup='$row[photo_ID]1'class='comments_popup'>
 <div class='comments_popup_menu popup$row[photo_ID]1'>
   <div class='comts_window'>
   <a id='close_comts_btn' class='hide_comments_menu'>X</a>
      <div class='inner_comts_box'>
    show comments $crow[user_comments]<br>
                  $crow[time_comment]<br>
      </div>
    </div>
  </div>";

} //Close Query1

javascript popup：

$(document).ready(function(){
// show popup when you click on the link

 $('.comments_popup').click(function(event){
    event.preventDefault(); 
    var docHeight = $(document).height(); 
    var scrollTop = $(window).scrollTop(); 
    var selectedPopup = $(this).data('showpopup'); 

$('.cmts_overlay').show().css({'height' : docHeight}); 

$('.popup'+selectedPopup).show().css({'top': scrollTop+-30+'px'}); 

  });


$('.hide_comments_menu').click(function(){
    $('.comments_popup_menu').hide();
});


$(document).keyup(function(e) {
    if (e.keyCode == 27) { 
        $('.menu-bg, .comments_popup_menu').hide();
         }
       });
    });

CSS：

.comments_popup_menu {
 display: none;
   position: absolute;
   margin-top: 50px;
   left:450px;
   text-align:center;
    cursor: default;
    z-index: 10001;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
     }


     #close_comts_btn{
      left:425px; 
      position:absolute; 
      margin-top:10px; 
      font-family:Arial,Helvetica, sans-serif;
      font-size:20px; 
      color:white; cursor:pointer;
      opacity:1;}


 #inner_comts_box{background-color:white; margin-top:32px; 
 overflow:scroll; width:449px; height:450px; margin-left:0px;}

数据库表1 MYSQL中的照片

         id:1  photo_id:1   `img1.jpg`
         id:2  photo_id:2   `img2.jpg`
         id:3  photo_id:3   `img3.jpg`
         id:4  photo_id:4   `img4.jpg`

数据库表2 MYSQL中的注释

   id:1  comment_id:1  `good skateboard`
   id:2  comment_id:1  `come skate`
   id:3  comment_id:1  `love skating`
   id:4  comment_id:2  `love this`

然后全部显示在弹出窗口中。但在我的查询中，它们是重复的或堆叠在一起。

我希望我的MySQL数据库中的评论显示在一个弹出窗口中，就像这个Instagram弹出方评论的https://instagram.com/p/1_d9AQACWm/?taken-by=nikesb一样。

显示MySQL结果以popupoverlay形式

0 个答案: