модальное всплывающее окно после нажатия кнопки

Question

У меня есть таблица (список треков альбома), в которой есть столбец кнопок. Я хочу, чтобы при нажатии кнопки всплывала модальная строка с соответствующими словами. Мне нужно включить javascript, и мне нужно, чтобы он реагировал. помощь будет очень признательна.

примечание: Я только включил код для таблицы. Если вы считаете, что было бы более полезно опубликовать sh код для всей страницы, сообщите мне.

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 a.k.a 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">M.A.A.D 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;
}