How to show entire text in a modal on click of ellipsis in JS?

Question

I am working on a php code as shown below in which I have added ellipsis (...) after a particular word limit.

 <?php
      $programs = array();

      foreach ( $xml_files as $file ) {

      $xml = simplexml_load_file($src_dir."/".$file)  or die('Unable to load XML');

      $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

      $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

      $programs[] = array(  "episode_title" => (string)$path_title_en, 
            "description" => (string)$path_description_en;  
            } 

      $program["episode_title"] = substr($program["episode_title"],0,50).' <a href="">(...)</a>';  /* ellipsis is added after a particular word limit */ 

      $program["description"] = substr($program["description"],0,100).' <a href="">(...)</a>';  /* ellipsis is added after a particular word limit */        
 ?>
 <table>
    <tr>
        <td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
        <td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>   /* Line B */
    </tr>
 </table>

Line#A display the following text:

Flooding Concerns in
ABCSGSGSGSGSGSG and
SHSHSGFASGXDS (...)

Problem Statement:

I am wondering what JS code I need to add so that on click of (...) , full text show up in the modal something like this.

You are missing a lot of code here. You need a modal first of all. The complete strings will have to be stored somewhere or fetched from the server when the button is clicked. The anchors that you currently have do not link to anything and have no way of being linked back to the field it is associated with. — RugerSR9, May 30 '19 at 20:52
Yeah, I agree I am missing a lot. I probably need a pointer to start. (..) is a hyperlink which on click, I want modal to show up. — flash, May 30 '19 at 20:54
Wrote this for you, maybe it will point you in the right direction. https://www.w3schools.com/code/tryit.asp?filename=G4K28AX2Z9CY — RugerSR9, May 30 '19 at 21:06
@RugerSR9 In the code above, the date is getting pulled from xml and displayed on the webpage. — flash, May 31 '19 at 19:30
Yes, you just need to put your PHP in the correct spots in the sample code I provided above. — RugerSR9, Jun 04 '19 at 17:40
@RugerSR9 Can you give me pointer what modification I need in the code I pasted above ? — flash, Jun 04 '19 at 22:03
@flash I see a typo and don't know where your loop ends. You are not writing the ellipsis after a number of words, you are writing after a number of characters, so your leading substrings will be abruptly truncated AND you aren't checking if an ellipsis/modal is even necessary on a case by case basis. — mickmackusa, Jun 05 '19 at 08:51
Also, there seems to be some issue with your variable naming and array structure. — mickmackusa, Jun 05 '19 at 10:12
`` tags should not be used to structure non-tabular html content. How many xml records are you presenting? I don't know if there will only be one or many tables generated. Do you want both the title and the description to be presented in the same modal regardless of which ellipsis is clicked? What is the "word limit"? Your posted code is very broken, please improve your post. @flash — mickmackusa, Jun 05 '19 at 21:36
@mickmackusa The snippets of code which I have posted is not in right way. I will answer all your questions soon. Here is the file which has all the code https://jsfiddle.net/pkznxos0/1/ — flash, Jun 06 '19 at 20:51
@flash your php code dump into jsfiddle is painful to read. You should use pastebin or if your code can be executed, use 3v4l.org. This will preserve the line tabbing which will invariably make things easier for volunteers. Are you creating a single html table — mickmackusa, Jun 06 '19 at 22:25

mickmackusa · Accepted Answer · 2019-06-15T07:46:43.583

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">&times;</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. A data- 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 id for easy location for javascript. Elements that occur in multiple locations should contain class.
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">&times;</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">&times;</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

i have few questions but i am out of town. i will ask tomorrow. — flash, Jun 11 '19 at 03:00
I have one more [question](https://stackoverflow.com/questions/56533375/change-button-text-in-js-ajax-after-mp4-mp3-conversion-in-php). Its not similar but involving the same code which I have used here. I am wondering if you can have a look. — flash, Jun 13 '19 at 15:47
Your code seems to be working fine. Thank you for that. The thing which I forgot to tell you is on click of ellipsis it shows the entire content in a modal belonging to that particular row (tr) whereas it should show the content belonging to that particular cell in a modal (not the entire row). — flash, Jun 14 '19 at 22:13
I must say, from a User eXperience point of view, I don't think it is a good idea to make the user click and click to see related content. If you disagree, you can keep the same lookup array and only present the desired data, move the `class="triggersModal" data-index="#"` attributes to the cells (and e.g. `data-content="episode-title"`), then use both `data-` values to access the lookup. — mickmackusa, Jun 15 '19 at 01:15
Thanks for letting me know. It’s actually part of the requirement. I am wondering if you can modify the answer. :) — flash, Jun 15 '19 at 01:23
I've updated my answer to include a runnable snippet and a tested php version (ready to copy-paste into your project (then tweaked to suit your needs). — mickmackusa, Jun 15 '19 at 07:47
I am facing two issues; **1st is** on click of elippsis modal do appear but it gets disappeared automatically after 1-2 seconds. I am wondering what is the reason behing this. — flash, Jun 16 '19 at 23:08
Please offer a pastebin link that clearly shows your coding attempt and I'll have a look when I am on the train home. My answer doesn't have a self-closing feature, so it feels like I am getting roped into providing free dev work for you. — mickmackusa, Jun 17 '19 at 06:05

Mykola Prymak · Answer 2 · 2019-06-06T08:43:05.803

You should use a modified demo to be able to use custom text in that modal. https://www.w3schools.com/code/tryit.asp?filename=G4QNZITEFN72

Then modify your code to be able to send full text in that modal window

<?php
    $programs = array();

    foreach ( $xml_files as $file ) {
        $xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');

        $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

        $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

        $programs[] = array("episode_title" => (string) $path_title_en, "description" => (string)$path_description_en;);
    } 

foreach ( $programs as $program ) {
    $episode_title = substr($program["episode_title"],0,50).' <a href="#show_full_title" onClick="showModal(\''.htmlspecialchars($program["episode_title"]).'\')">(...)</a>';  /* ellipsis is added after a particular word limit */ 

    $description = $program["description"] = substr($program["description"],0,100).' <a href="#show_full_description" onClick="showModal(\''.htmlspecialchars($program["description"]).'\')">(...)</a>';  /* ellipsis is added after a particular word limit */        
?>
    <table>
        <tr>
            <td style="width:8%; text-align:center;"><?php echo $episode_title; ?></td> /* Line A */
            <td style="width:8%; text-align:center;"><?php echo $description; ?></td>   /* Line B */
        </tr>
    </table>
<?php } ?>

with adding an onClick handler to that tags which will call the showModal function with full text.

This will not work and shares the same typos from the posted question. Not a very careful answer. When there is a bounty on offer, the least you can do is use proper code tabbing and write an executable script. — mickmackusa, Jun 05 '19 at 21:06
I agree with you @mickmackusa that my code wasn't working, but the main question was - how to show modal with that piece of code that the author was provided. But I updated the code to be sure that it won't mislead anyone. — Mykola Prymak, Jun 06 '19 at 08:45
@mickmackusa Here is the file which has all the code https://jsfiddle.net/pkznxos0/1/ Hope it helps. — flash, Jun 06 '19 at 20:31

score 0 · Answer 3 · answered Jun 07 '19 at 06:26

I just update your code with modal UI, Script and few logic to pass content to modal. Try this I hope it'll help you out. Thanks

var modal = document.getElementById("readMoreModal");
var btn = document.getElementsByClassName("readMoreModalTrigger")[0];
var closeBtn = document.getElementById("close");

// When the user clicks on <span> (x), close the modal
closeBtn.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";
  }
}

// Append Readmore content in modal
function readMoreMethod(text) {
  document.getElementById("modal-content-append").innerHTML = text;
  modal.style.display = "block";
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  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 */
#close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close:hover,
#close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

 <?php
      $programs = array();

      foreach ( $xml_files as $file ) {

      $xml = simplexml_load_file($src_dir."/".$file)  or die('Unable to load XML');

      $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

      $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

      $programs[] = array(  "episode_title" => (string)$path_title_en, 
            "description" => (string)$path_description_en;  
            } 

      $program["episode_title"] = substr($program["episode_title"],0,50).' <a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["episode_title"]')">(...)</a>';  /* ellipsis is added after a particular word limit */ 

      $program["description"] = substr($program["description"],0,100).' <a 
class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["description"]')">(...)</a>';  /* ellipsis is added after a particular word limit */        
 ?>

<table>
    <tr>
        <td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?><a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('tadsad sadsad asdasd asdas dsad ')" href="">(...)</a></td>
        <td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>
    </tr>
 </table>   

<!-- The Modal -->
<div id="readMoreModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span id="close">&times;</span>
    <p id="modal-content-append"></p>
  </div>

</div>

Your answer is obviously not tested because it contains the same script-breaking flaws that the OP posted. Furthermore, your solution will break if the the title or description contains a quoting character. — mickmackusa, Jun 07 '19 at 10:57

score 0 · Answer 4 · answered Jun 10 '19 at 07:24

Here is the HTML/CSS/JS for you.

const trigger = document.querySelector(".trigger");
    trigger.addEventListener("click", () => {
      const fullTextSibling = trigger.previousElementSibling;
      fullTextSibling.classList.add("active");
      const closeModal = document.querySelector(".full_text > div > button");
      closeModal.addEventListener("click", () => {
        fullTextSibling.classList.remove("active");
      });
    });

.full_text {
        display: none;
      }
      .full_text > div {
        min-width: 300px;
        min-height: 100px;
        background: white;
        padding: 20px;
        border-radius: 10px;
      }
      .full_text.active {
        display: flex;
        background: #80808069;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        align-items: center;
        justify-content: center;
      }

<div class="container">
      Lorem, ipsum dolor
      <div class="full_text">
        <div>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          <button>X</button>
        </div>
      </div>
      <a href="#" class="trigger">(...)</a>
    </div>

How to show entire text in a modal on click of ellipsis in JS?

4 Answers4

Here is my source code transferred to a runnable Stackoverflow snippet: