Not specifying the use of Bootstrap 5 in this version. Many code examples are taken from the Bootstrap site.
The approach here involves utilizing a single modal and swapping data instead of creating a modal for each record.
Instead of using a button within the table, the Bootstrap version is used with additional record data stored in data attributes. While this method increases efficiency, a preferable alternative would be to store the data in an object and reference it using data-id.
// show() function
<button type="button"
class="btn btn-primary more"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
data-id="${id}"
data-name="${name}"
data-email="${email}"
data-gender="${gender}"
data-status="${status}">
View More
</button>
Adding the HTML structure of the bootstrap modal
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="modalDynamicContent" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Lastly, attaching an event listener for show.bs.modal to track when the modal is opened by clicking on any View More button.
const myModalEl = document.getElementById('exampleModal');
const myModalContent = document.getElementById('modalDynamicContent');
myModalEl.addEventListener('show.bs.modal', event => {
// Button that triggered modal
viewMoreButton = event.relatedTarget;
// Retrieve data
id = viewMoreButton.dataset.id;
email = viewMoreButton.dataset.email;
gender = viewMoreButton.dataset.gender;
status = viewMoreButton.dataset.status;
myModalContent.innerHTML = `
<p>
Email: <span id="email">${email}</span>
</p>
<p>
Gender: <span id="gender">${gender}</span>
</p>
<p>
Status: <span id="status">${status}</span>
</p>
`
});
let table;
const show = (data) => {
//console.table(data);
table.innerHTML = data
.map(({id,name,email, gender,status}) => `<tr>
<td> ${name}</td>
<td>
<button type="button"
class="btn btn-primary more"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
data-id="${id}"
data-name="${name}"
data-email="${email}"
data-gender="${gender}"
data-status="${status}">
View More
</button>
</td>
<td hidden id="email">${email}</td>
<td hidden id="gender">${gender}</td>
<td hidden id="status">${status}</td>
</tr>`)
.join("");
};
const load = () => {
fetch("https://gorest.co.in/public/v2/users")
.then(result => result.json())
.then(show);
};
window.addEventListener("DOMContentLoaded", () => {
table = document.getElementById('table');
//table.addEventListener("click", (e) => {
//const tgt = e.target.closest("button");
//if (!tgt) return;
//tgt.closest("tr").querySelectorAll("td").forEach(td => td.hidden = false);
//})
load();
});
const myModalEl = document.getElementById('exampleModal');
const myModalContent = document.getElementById('modalDynamicContent');
myModalEl.addEventListener('show.bs.modal', event => {
// Button that triggered modal
viewMoreButton = event.relatedTarget;
// Get data
id = viewMoreButton.dataset.id;
email = viewMoreButton.dataset.email;
gender = viewMoreButton.dataset.gender;
status = viewMoreButton.dataset.status;
myModalContent.innerHTML = `
<p>
Email: <span id="email">${email}</span>
</p>
<p>
Gender: <span id="gender">${gender}</span>
</p>
<p>
Status: <span id="status">${status}</span>
</p>
`
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<table id='table'>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="modalDynamicContent" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>