When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated.

Note: Only the code for the table has been provided. Let me know if you'd like to see the code for the entire page as well.

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
javascripthtmlcsshtml-tablemodal-dialog

Answer â„–1

One option is to create a wrapper at the top of your page.

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

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

When the button is clicked, the modal appears. Feel free to customize the modal using CSS, just be sure to include 'display: none;' to hide it by default.

.modal{
  display: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with items overlapping in hoverable drop-down menu

I have been attempting to create a hoverable dropdown menu, but I am encountering an issue where the items of the dropdown are overlapping. Despite my efforts to adjust the CSS classes, I have not been successful in fixing this problem. Additionally, I ha ...

htmlcss

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

I am looking to incorporate {{ }} within the Angular "filter" filter, specifically while nested inside an ng-repeat. Let's consider the relationship below: var categories = [ {"title":"land"}, {"title":"sea"}, {"title":"air"} ]; var vehi ...

javascriptangularjsfilternestedangularjs-ng-repeat

Dealing with Redis session management in the event of a database disconnection

Having trouble with losing connection to Redis, which is used for sessions in my Express App. var RedisStore = require('connect-redis')(express); sessionStore = new RedisStore(config.db.redis.connection); sessionStore.client.on('error' ...

javascriptnode.jssessionexpressredis

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties. My desired outcome is to have the first u ...

htmlcssflexbox

Is it possible to access a PHP variable from a different file in an HTML file?

Can someone help me with separating the javascript from this php file? I need to specify where the javascript should look for the php file, as currently it only executes within the php file. <?php date_default_timezone_set('Europe/London'); r ...

javascriptphpjson

Issue with V-checkbox input-value not triggering correctly on change

Query Example: <query #[`${instanceItemIdKey}`]="{ item }"> <v-checkbox :input="item.content" @modify="$notify('onPermissionUpdate', item)" ></v-checkbox> </query> The information that influ ...

javascriptvue.jsvuetify.jsvuex

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

javascriptjqueryhtmlpopuppopupwindow

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

javascripthtmlcssreactjsflexbox

Dynamic Sizing of Inline Input Fields in Bootstrap 3 Using Narrow Columns

My goal is to create an inline form within a small container (.col-sm-4) without it wrapping into multiple lines. I want the inputs to adjust to the column size while also having the button in the desired position. To achieve this, I have managed to remove ...

htmlcsstwitter-bootstrap

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Troubarked by problems NodeJS faces when trying to establish a connection with CosmosDB using a connection

Having trouble with my code that fails when I try to create a new instance of the CosmosClient. The option to create a CosmosClient using a connection string should be straightforward. The environment variable holds the necessary connection string in this ...

javascriptreactjsnode.jsazureazure-cosmosdb

Ensure that autocorrect is set to suggest the nearest possible quantity form in WordPress

I'm currently in the process of creating a webshop using WooCommerce. Our quantity system is a bit unique, as we are using WooCommerce advanced quantity, which means that quantities increase by 0.72 increments (e.g. 0.72, 1.44, 2.16 etc). The +/- butt ...

javascriptjquerywordpresswoocommerce

What is the best way to incorporate visual indicators into specific columns containing certain keywords?

Is there a way to customize the script code responsible for displaying table data so that icons automatically appear next to specific keywords in the Gender column? For instance, can we have an icon like glyphicon glyphicon-heart-empty for Male and glyphic ...

htmlangularjs

Extracting numbers using regular expressions can be tricky especially when dealing with mixed

Currently, I am attempting to create a javascript regex that can extract decimal numbers from a string containing a mix of characters. Here are some examples of the mixed strings: mixed string123,456,00indeed mixed string123,456.00indeed mixed string123,4 ...

javascriptregex

There was an issue with the origin null not being permitted by Access-Control-Allow-Origin

Possible Duplicate: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin I am currently working on a weather application that runs smoothly in browsers. However, when I try to deploy it on my Android phone, it encounters iss ...

javascriptandroidjquerycordova

Is it possible to transfer data to the next page by clicking on a table row?

I'm facing an issue with a non-clickable table. When a row is clicked, I want to navigate to a detail page from the table while passing the id value in the process. I know that I need to create an href attribute on the table row and somehow transfer ...

phphtml

Can someone provide guidance on how to validate a HEX color in Cypress?

As I dive into testing with Cypress, my lack of experience has become apparent. I am trying to test the background-color CSS property on a specific element, but running into an issue - everything is in RGB format behind the scenes, while I need to work wit ...

javascripttestingcypress

Tips for choosing and filtering the preferred object in ES6

Consider this array structure: const testData = [ { group: "Team1", info: [ { key: 123, person: "Alice", type: "Football" }, { key: 456, person: "Bob", type: " ...

javascripttypescriptecmascript-6

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Here is a code snippet I have been using to open a URL in a new tab: window.open(urlToOpen, '_blank', 'noopener noreferrer'); The issue I am experiencing is that when this code is executed for the first time, it opens the URL in a new ...

javascripthtmltypescripturlbrowser

What steps should be taken to activate eslint caching?

I'm attempting to activate eslint caching by following the instructions in this section of the user guide The command I am using is npm run lint -- --cache=true, and the lint script simply executes a script that spawns esw (which itself runs eslint â ...

javascriptnpmcachingeslint