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模式窗口需要向下滾動才能看到

回答

相關問題