Scribd
Upload
7 views3 pages

CSS Styling

The document outlines a web-based table with two rows, each containing a button to view details in a modal. It includes CSS for styling the modal and JavaScript for managing its display, allowing users to open and close the modal with dynamic content. The modal is hidden by default and can be triggered by clicking the corresponding buttons in the table.

Uploaded by

NAKUT Vivien
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views3 pages

CSS Styling

The document outlines a web-based table with two rows, each containing a button to view details in a modal. It includes CSS for styling the modal and JavaScript for managing its display, allowing users to open and close the modal with dynamic content. The modal is hidden by default and can be triggered by clicking the corresponding buttons in the table.

Uploaded by

NAKUT Vivien
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<table>

<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td><button onclick="openModal('Details for Row 1')">View
Details</button></td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td><button onclick="openModal('Details for Row 2')">View
Details</button></td>
</tr>
</tbody>
</table>

<!-- The Pop-up Modal Structure -->


<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<p id="modal-text">Modal content will go here.</p>
</div>
</div>

2. CSS Styling
Use CSS to hide the modal by default and style its appearance.

css
/* The Modal (background) */
.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 */
background-color: rgba(0,0,0,0.4); /* Black background with opacity */
padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
max-width: 500px;
border-radius: 5px;
}

/* The Close Button */


.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

3. JavaScript Logic
Use JavaScript to manage the display property of the modal.
javascript
// Get the modal element and the paragraph for content
var modal = [Link]("myModal");
var modalText = [Link]("modal-text");

// Function to open the modal and set content


function openModal(content) {
[Link] = content; // Set dynamic content from the table row
[Link] = "block"; // Show the modal
}

// Function to close the modal


function closeModal() {
[Link] = "none"; // Hide the modal
}

// Close the modal if the user clicks anywhere outside of the modal content
[Link] = function(event) {
if ([Link] == modal) {
closeModal();
}
}

You might also like