I obviously have a technical problem that I just cannot figure out. First of all, being called a “newbie” is being very kind to me! Here’s a quick overview of my problem: I have a MYSQL database which contains data on a number of home audio files. I’ve managed to get data back to a results page when searching based on content some of the table fields – title, description, tags...
| Title | Description |Tags | PLAY AUDIO|
| Title 1| Desc 1 |Tags | BUTTON |
| Title 2| Desc 2 |Tags | BUTTON |
I have also modified a simple Modal window code that I found online to create a kind of popup Audio Player that will show info about the file and allow it to be played. My aim is to have the user click on a specific button under Play Audio and it will open the Modal with the appropriate audio file ready to be played. However, it does not work. It will open the first one but not any of the following ones. I do know that the id must be unique and so I tried this
<div id="audioModal<?php echo $row['audio_id']; ?>" >
<button id="audioBtn<?php echo $row['audio_id']; ?>" >Play Audio</button>
I'm guessing the main problem is when I try to use this in the javascript code as I cannot use the php id in it.
<script type="text/javascript">
var modal = document.getElementById("audioModal");
// Get the button that opens the modal
var btn = document.getElementById("audioBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
} </script>
But no luck. All suggestions are more than welcome. Thanks in advance.
Here is the associated CSS if it helps.
<style>
.modal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Header */
.modal-header {
padding: 2px 10px;
background-color: #98a9b5;
color: black;
}
h2{
color: white;
text-decoration: underline;
}
/* Modal Body */
.modal-body {
padding: 2px 10px;
/*margin: auto 20%; */
background-color: #98a9b5;
/*border: solid;*/
}
/* Modal Footer */
.modal-footer {
padding: 2px 10px;
background-color: #3e6077;
color: white;
}
/* Modal Content */
.modal-content {
background-color: #3e6077;
margin: 10% auto; /* 15% from the top and centered */
padding: 10px;
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
