Javascript模式窗口需要向下滚动才能查看

我目前正在使用SoundCloudAPI为歌曲提取图像和跟踪链接。我当前在点击相册图像时通过模式窗口显示曲目信息。但是，对于屏幕底部的歌曲，模式窗口仅显示在屏幕顶部，要求用户向上滚动以查看曲目信息。可能与css定位有关，但删除位置：绝对仅将模式窗口置于所有相册图像的底部，需要向下滚动如何使用户点击图像即可打开并启动当前位置的模式窗口，而无需滚动？欢迎使用Javascript/jquery/css回答

我的CSS：

#modal { 
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;

}

#trackinfo {

    width:380px;
    height: 180px;
    padding: 20px; 
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    box-shadow: 10px 10px 5px;
    border-radius: 15px;
    text-align: center;
    background: #c4e5c1;
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;

}

.hidden { 
    display:none;
}

显示和隐藏模式的我的Javascript：

  function doSearch() {
    var searchTerm = document.getElementById('search').value;

    // Search soundcloud for artists
    SC.get('/tracks', { q: searchTerm}, function(tracks) {
      for(track in tracks) {

        var img = document.createElement('img');
        img.setAttribute("src", (tracks[track]["artwork_url"]));
        var title = tracks[track].title.replace("'", "\\\'").replace("\"", "\\\"");

        linky = document.createElement('a');
        linky.setAttribute("href", (tracks[track].permalink_url));
        console.log(linky);

        img.setAttribute("onclick", "showTrackInfo('" + title + "\\n"+ tracks[track].uri + " " + "\\n\\n(click to close) " + "')"); 

        console.log(img);


        if (tracks[track]["artwork_url"] == null) {
          console.log(""); } 
        else { 

          var Catalog = document.getElementById('catalog');
          Catalog.appendChild(img);
          $('div#catalog').append('<a href="'+linky+'"><img src="http://i.imgur.com/rGdvfl7.png"></a>');

        }
      }
    });
  };

  function showTrackInfo(track) { 
    var trackInfoElement = document.getElementById("trackinfo");
    trackInfoElement.appendChild(document.createTextNode(track));

    var modal = document.getElementById("modal"); 
    modal.setAttribute("class", ""); 
  }

  function hidemodal() { 
    var trackInfoElement = document.getElementById("trackinfo");
    trackInfoElement.childNodes;

    while ( trackInfoElement.firstChild ) trackInfoElement.removeChild( trackInfoElement.firstChild );

    var modal = document.getElementById("modal");
    modal.setAttribute("class", "hidden"); 
  }

函数doSearch（）{
var searchTerm=document.getElementById（'search'）.value；
//搜索soundcloud寻找艺术家
SC.get（'/tracks'，{q:searchTerm}，函数（tracks）{
用于（轨道中的轨道）{
var img=document.createElement（'img'）；
img.setAttribute（“src”，（tracks[track][“artwork_url]”）；
var title=tracks[track].title.replace（“'”，“\\\”）.replace（“\”，“\\\”）；
linky=document.createElement（'a'）；
setAttribute（“href”，（tracks[track].permalink_url））；
控制台日志（linky）；
img.setAttribute（“onclick”、“showTrackInfo”（“+title+”\\n“+tracks[track].uri++“\\n\\n（单击关闭）”+”））；
控制台日志（img）；
如果（曲目[track][“artwork_url”]==null）{
console.log（“”；}
否则{
var Catalog=document.getElementById（'Catalog'）；
目录子目录（img）；
$（'div#catalog'）。追加（''）；
}
}
});
};
函数showTrackInfo（track）{
var trackInfoElement=document.getElementById（“trackinfo”）；
appendChild（document.createTextNode（track））；
var modal=document.getElementById（“modal”）；
modal.setAttribute（“类”，“类”）；
}
函数hidemodal（）{
var trackInfoElement=document.getElementById（“trackinfo”）；
trackInfoElement.childNodes；
while（trackInfoElement.firstChild）trackInfoElement.removeChild（trackInfoElement.firstChild）；
var modal=document.getElementById（“modal”）；
modal.setAttribute（“类”、“隐藏”）；
}

---

这些功能都工作得很好，我只需要知道如何在点击时定位模式框，这样用户就不需要滚动查看trackinfo。非常感谢您的帮助

尝试

位置：固定应使其填充页面，无论它们位于何处
天哪！这么简单的修复！非常感谢你。