modal pop up after clicking button

Stack Overflow Asked by Ashmoe on August 19, 2020

I have a table (an album’s tracklist) which has a column of buttons, what i want to do is that when you press a button, a modal pops up with the respective lyrics. i need to incorporate javascript and i need it to be responsive. help would be much appreciated.

note:
I’ve only incorporated the code for the table. If you believe that it would be more helpful to publish the code for the entire page please do tell me.

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>

css html html table javascript modal dialog

One Answer

you can create a wrapper on top of your page.

<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>

the button is clicked, and the modal is displayed. You can style the modal as you like, just remember to add in the css none to have it hidden by default.

.modal{
  display: none;
}

Answered by JohnTwo23 on August 19, 2020

modal pop up after clicking button

One Answer

Add your own answers!

Related Questions

CS50 Credit Card Validation

Regex Multiple Parenthases

can anyone explain me the background process of this code

How is “from” in python can copies

Python Iterating through List of List

Why can’t I use the constructor of a case class as a function for use inside map()

how to unpack list inside list and append to string in python?

Pytest environment fixtures not seen by imported class

Load RabbitMQ config at startup

Exchangelib: ItemAttachment appears to strip file extension from the attachment name

Obtain Date value from HTML form and pass it in PHP

OnChanged State of Checkbox in Flutter

Apache Camel – How to make a value accessible across the entire route?

Only the else condition works in my google apps script Twilio Fax sending web app

Python 3 REGEX .finditer: Usefulness of hex address in “callable_iterator object at 0x…”?

General error Telecom doesn’t have a default value with function in model

How to efficiently map over DF and use combination of outputs?

I am currently working on Javascript and stuck with using for loop in objects

json encode and decode is not working in PHP

Create html table from two array where arrays lengths not necessary the same

Ask a Question