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

How to get a thread dump of a running Node.js process?

Laravel does not read .env variables when there is a # character

My gdb debugger isn’t responding when I launch it

Getting the purchase/consumption status of a Google Play item from C#

Jquery Select all IDs in different Sections

Can’t merge two dictionaries into one dictionary

What kind of errors are returned by HttpServer stream in Dart

Sharing Power BI Dashboards – External Users

Converting or formating nested list with name of month into new list in python

SQL query to loop through records

Is there a better way to implement nested setTimeouts()

Array list from AsyncData/fetch rendered by v-for throw: The client-side rendered virtual DOM tree is not matching server-rendered

Next.js deploy via Serverless Framework, How does it work and can be up-to-date?

CMYK image being converted to RGB

no reverse matching at / and crawler is not a registered namespace

Bootstrap Toast at bottom right of page

I doesn’t receive any formated data from static class

How you create your own views that interact with existing views with operator |?

SQL Notes: Hackerrank The Report Query how to save the subquery variable

NEO4J gives node count as negative

Ask a Question