How to show entire text in a modal on click of ellipsis in JS?
Here is my fully tested implementation of your string extraction and the required modal feature from the w3schools demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<?php
$episodes = [
[
'episode_title' => 'Lorem Ipsum',
'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
[
'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
]
];
foreach ($episodes as $index => $episode) { ?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div><?php
if (strlen($episode['episode_title']) <= 50) {
echo $episode['episode_title'];
} else {
echo substr($episode['episode_title'], 0, 50) , "(...)";
}
?></div>
<div><?php
if (strlen($episode['description']) <= 100) {
echo $episode['description'];
} else {
echo substr($episode['description'], 0, 100) , "(...)";
}
?></div>
</div>
<?php } ?>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
<script>
// Transfer data from php to javascript
let episodes = <?php echo json_encode($episodes); ?>,
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").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>
</body>
</html>
You will need to replace my hardcoded input (above) with your file scrapings. To create your $episodes array and display the main layer's content with a single loop, use this inside the <body> tag where you want to display the clickable readmore boxes:
<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
$xml = simplexml_load_file("{$src_dir}/{$file}");
if (!$xml) {
continue;
}
$episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$episodes[] = ['episode_title' => $episode_title, 'description' => $description]; // used downscript to deliver data to clientside/js
?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div>
<?php
if (strlen($episode_title) <= 50) {
echo $episode_title;
} else {
echo substr($episode_title, 0, 50) , "(...)";
}
?>
</div>
<div>
<?php
if (strlen($description) <= 100) {
echo $description;
} else {
echo substr($description, 0, 100) , "(...)";
}
?>
</div>
</div>
<?php
++$index;
}
?>
Things to notice:
- All of the click events are written in the script block instead of inside the html to keep things clean and readable.
- Using an ellipsis is only necessary if the string has enough length to merit it.
- Pass the data from php to js with
json_encode(). - Don't use
die(). - My preference is to not name variables (in php or js) that will only be used once. There are some exceptions, but this is my default philosophy.
- Since the lookup array (
episodes) is an indexed array, the only relevant value to pass from the clicked element is the index. Adata-attribute is a maintain the relationship between the main display and the data to be displayed in the modal. - Using
<table>tags to display non-tabular content is not recommended. I have done very little to style the page & modal. I didn't want to depart too far from the demo that you supplied. - HTML elements that need to be identified should contain an
idfor easy location for javascript. Elements that occur in multiple locations should containclass. - After testing my script, there is no problem with displaying quoted text on the main page or in the modal.
- I tried to keep the syntax simple/readable, but I often prefer ternary operators (inline conditions) in my php and js. Some people prefer the shorthand
<?=and?>when displaying php. I'm cool with that too; choose whatever you like. - Last but not least, if your input strings are coming from insecure channels or if they contain html, it would improve the stability/security of your application to encode html entities using
htmlspecialchars($string, ENT_QUOTES, 'UTF-8')on any strings being displayed to the screen (after counting the string length, but before displaying). Here's a good reference: https://stackoverflow.com/a/1996141/2943403
Here is my source code transferred to a runnable Stackoverflow snippet:
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = lookup[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = lookup[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").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";
}
} body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="triggersModal" data-index="0">
<div>Lorem Ipsum</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="triggersModal" data-index="1">
<div>The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
</body>
</html>Another runnable snippet which has been adjusted to present cell text individually...
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index'),
content = this.getAttribute('data-content');
document.getElementById("modalText").innerHTML = lookup[index][content];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").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";
}
} body {font-family: Arial, Helvetica, sans-serif;}
.box {
padding: 50px;
border: solid 2px black;
margin: 50px;
}
.triggersModal {
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="box">
<div class="triggersModal" data-index="0" data-content="episode_title">Lorem Ipsum</div>
<div class="triggersModal" data-index="0" data-content="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="box">
<div class="triggersModal" data-index="1" data-content="episode_title">The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div class="triggersModal" data-index="1" data-content="description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalText"></p>
</div>
</div>
</body>
</html>And here is a pastebin dump of an php execution of the above: https://pastebin.com/YnhNq6rD