Javascript 有不同内容的弹出窗口？

我一直在尝试让我的弹出窗口在点击tumblr上的这个委托主题时显示不同的内容，但无法使用我现有的代码。我被困住了，很沮丧，所以任何指导都会很好

<!-- begin popup -->

这是我一直在使用的脚本，它是java，我知道它可能不是正确的使用方法

<script>

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

</script>

函数myFunction（）{
var popup=document.getElementById（“myPopup”）；
popup.classList.toggle（“显示”）；
}

您提供的代码不完整代码太多…：）告诉我们你具体想要什么，我会给你写javascript代码对不起！我知道！我只希望每个弹出窗口显示不同的内容，因为现在，每个弹出窗口在每个弹出窗口中显示相同的内容。在我现有的代码中，我无法获得任何工作。非常感谢你的帮助！我意识到这太多了！然后为弹出窗口添加html代码，请

    .popup {
    position:relative;
    display: inline-block;
    overflow:visible;

}

.popup .popuptext {
    visibility: hidden;
    background-color: transparent;
    color: {color:text};
    text-align: justify;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    width:200px;
    left:0px ;
    margin:auto;
    overflow:visible;
 
}

.popupcontent {
    position:absolute;
    height:235px;
    background-color:{color:container};
    width:225px;
    left:0px;
    border-radius:5px;
}



.musename {
    position:absolute;
    font-family:summer;
    font-size: 6vw;
    width:100px;
    left:20px;
    top:25px;
    line-height:25px;
    z-index:1;
    
}


.musename b {
    font-family:abril fatface;
    position:absolute;
    font-size: 2vw;
    z-index:-1;
}

.musestatsbox {
    position:absolute;
    height:120px;
    overflow:scroll;
    left:120px;
    width:95px;
    top:98px;
}

.musestats b {
    font-size:11px;
    
}

.musebio {
    position:absolute;
    line-height:10px;
    overflow:scroll;
    height:120px;
    width:90px;
    left:20px;
    top:100px;
}

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

<script>

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

</script>