單擊按鈕后彈出模式

Question

我有一個表（專輯的曲目列表），其中有一列按鈕，我想做的是，當您按下按鈕時，會彈出一個帶有相應歌詞的模式。 我需要合並 javascript 並且我需要它來響應。 幫助將不勝感激。

注意：我只合並了表格的代碼。 如果您認為發布整個頁面的代碼會更有幫助，請告訴我。

 table { width: 110%; text-align: left; } td { font-family: fantasy; font-size: 1.18em; padding-bottom: 20px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="tracklist"> <table> <tr> <td class="no">1.</td> <td class="title">Sherane aka Master Splinter's Daughter</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">4:33</td> </tr> <tr> <td class="no">2.</td> <td class="title">Bitch, Don't Kill My Vibe</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">5:10</td> </tr> <tr> <td class="no">3.</td> <td class="title">Backseat Freestyle</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">3:32</td> </tr> <tr> <td class="no">4.</td> <td class="title">The Art of Peer Pressure</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">5:24</td> </tr> <tr> <td class="no">5.</td> <td class="title">Money Trees (feat. Jay Rock)</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">6:26</td> </tr> <tr> <td class="no">6.</td> <td class="title">Poetic Justice (feat. Drake)</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">5:00</td> </tr> <tr> <td class="no">7.</td> <td class="title">Good Kid</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">3:34</td> </tr> <tr> <td class="no">8.</td> <td class="title">MAAD City (feat. MC Eiht)</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">5:50</td> </tr> <tr> <td class="no">9.</td> <td class="title">Swimming Pools (Drank) [Extended Version]</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">5:13</td> </tr> <tr> <td class="no">10.</td> <td class="title">Sing About Me, I'm Dying of Thirst</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">12:03</td> </tr> <tr> <td class="no">11.</td> <td class="title">Real (feat. Anna Wise)</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">7:23</td> </tr> <tr> <td class="no">12.</td> <td class="title">Compton (feat. Dr. Dre)</td> <td><button class="btn"><i class="fa fa-bars"></i></button></td> <td class="duration">4:08</td> </tr> </table> </div>

Answer 1

您可以在頁面頂部創建一個包裝器。

<div class="modal" id="lyrics1">
  <div class="lyrics1"> lirics goes here </div>
</div>
<button class="lyricsPreview" onclick="openModal()"></button>  

<script>
 const lyrics1 = document.getElementById('lyrics1');
 function openModal(){
   lyrics1.style.display = "block";
 }
</script>

單擊按鈕，並顯示模式。 您可以隨意設置模態框的樣式，只需記住添加 css none 以使其默認隱藏。

.modal{
  display: none;
}