JavaScript模式窗口需要向下滚动才能看到

我目前正在使用Soundcloud API来拉取图像并跟踪歌曲的链接。我目前通过单击相册图像时通过模态窗口显示曲目信息。但是，对于屏幕底部的歌曲，模式窗口仅出现在屏幕的顶部，需要用户向上滚动以查看曲目信息。可能与css的定位有关，但删除位置：绝对只将模式窗口放在所有专辑图像的底部，需要向下滚动。 我该如何做到这一点，以便用户点击图像将打开并启动模式窗口的权利，而不需要滚动？ Javascript/jquery/css答案都欢迎。JavaScript模式窗口需要向下滚动才能看到

我的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"); 
    }

所有工作得很好，我只需要知道如何在模式对话框后点击位置的功能，使用户不需要滚动查看trackinfo。任何帮助非常感谢。

来源

2013-04-28 jenno

尝试在对话框position: fixed;，应使其填充页面，无论他们在哪里就可以了

来源

2013-04-28 16:55:23

OMG万岁！这样一个简单的修复！非常感谢。 – jenno 2013-04-28 17:23:36

@ jenno：如果它解决了您的问题，请将其标记为答案 – 2013-04-28 17:42:54

JavaScript模式窗口需要向下滚动才能看到

回答

相关问题