具有Click事件的Firebase Javascript动态模态

Question

我要创建由Firebase数据库管理的博客系统。

我为此开发了一些东西。

我从管理面板将数据插入到Firebase数据库中 并将数据从firebase显示到Main WebApp。

在此，我具有如下数据结构：

WebApp看起来像这样： Generating Cards from Firebase Data ( Click Here )

现在，当我单击查看博客时，我想要的是该模态打开并显示所单击博客的Firebase数据中的消息属性。

例如我单击“第一个博客”（“查看博客”），然后从Firebase中获取消息，并生成包含该消息的模态。

这是我的代码：

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
var database = firebase.database();
firebase.database().ref('/NewBlog').once('value').then(function(snapshot) {

var PostObject = snapshot.val();
var keys = Object.keys(PostObject);
var currentRow;
const userDetailUI = document.getElementById("userDetail");

userDetailUI.innerHTML = ""
var v = snapshot.val();
var keys = Object.keys(v);
console.log(keys);
console.log(v);
for(var key in v) {
  //var k = keys[i];
  var $card = document.createElement("card");
  $card.innerHTML = "<div class='card' style='width: 18rem;'>"+ ' <img class="card-img-top" src=' + v[key] .imageUrl +
' alt="Card image cap">'+
    "<div class='card-body'>"+" <h5 class='card-title is-primary' >"+v[key] .title+"</h5>"+ 
'<button onclick="document.getElementById("id01").style.display="block" ' + v[key]+'>View Blog</button> ' + "  </div> "+ "</div>"+ "</div>";
    userDetailUI.append($card);
  }
// ...
});

<!-- language: lang-html -->

<div id="userDetail"  style="color:black;margin:7%;">

   </div>
<!-- Conatct Object li.list-group-item.contact will be added here by js -->

<div class="row"> 
  <div class="col-md-6"> 
    <!-- Modal -->
    <div id="id01" class="modal">
      <div class="imgcontainer">
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        <h1>Contact Us</h1>
      </div>
      <div class="container">
        <h1>TEST</h1> 
      </div>
      <div class="container" style="background-color:#f1f1f1">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      </div>
    </div>
  </div> 
</div

请帮助我制作一个动态模式，该模式显示Clicked Blog的Firebase数据。