Javascript 모달 창에서 아래로 스크롤해야합니다.

Question

현재 Soundcloud API를 사용하여 이미지를 가져 와서 노래 링크를 추적하고 있습니다. 현재 앨범 이미지를 클릭 할 때 모달 창을 통해 트랙 정보를 보여줍니다. 그러나 화면 맨 아래에있는 노래의 경우 모달 창은 화면 상단에만 나타나며 사용자가 위로 스크롤하여 트랙 정보를 확인해야합니다. 아마 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; 
} 

내 쇼를위한 자바 스크립트 숨길 모달 :

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를보기 위해 스크롤 할 필요가 없습니다. 어떤 도움을 많이 주셨습니다.

Answer 1

이 만세 OMG 그것을