如何创建一个在博客首页显示博客帖子的模式？

Question

我有一个博客网站；主页（索引页）中有博客文章（缩略图，标题，摘要和“查看”按钮）。我需要创建一个单击“视图”按钮时会弹出的模式。它应该显示博客文章标题，图像缩略图和其他一些文章详细信息。 请问如何实现？

我尝试了Java脚本，但是单击每个“查看”按钮时，模式仅显示一个博客文章。

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js'/>

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Shop">view</button>

<div id="Shop" aria-hidden="true" aria-labelledby="Shop" class="modal fade in" role="dialog" tabindex="-1" display="block">

  <div class="modal-dialog modal-lg">
    <div class="modal-content simpleCart_shelfItem">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title"><a expr:href='data:post.href'><data:post.title/></a></h4>
        </div>  
      </div> 
    </div> 

<script>
$('#Shop').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var title = &quot;<data:post.title/>&quot;;
  var modal = $(this)
  modal.find('.modal-title').text(title)
})
</script>