0

現在、Soundcloud API を使用して画像を取得し、曲のリンクを追跡しています。現在、アルバム画像をクリックすると、モーダル ウィンドウにトラック情報が表示されます。ただし、画面の下部にある曲の場合、モーダル ウィンドウは画面の上部にのみ表示されるため、ユーザーは上にスクロールしてトラック情報を表示する必要があります。おそらくCSSの配置と関係がありますが、position:absoluteを削除すると、モーダルウィンドウがすべてのアルバム画像の下部に配置されるだけで、下にスクロールする必要があります. ユーザーが画像をクリックすると、スクロールせずに現在の場所でモーダルウィンドウが開き、開始されるようにするにはどうすればよいですか? 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"); 
  }

関数はすべてうまく機能します。ユーザーがトラック情報を表示するためにスクロールする必要がないように、クリック時にモーダル ボックスを配置する方法を知る必要があります。どんな助けでも大歓迎です。

4

1 に答える 1

1

ダイアログボックスを試してみてくださいposition: fixed;。どこにいてもページがいっぱいになるはずです

于 2013-04-28T16:55:23.493 に答える