title: How to display image and .txt file value in a modal popup?
body: <p>I need to create/customize a modal pop up in PHP or Javascript. And I got these requirements:</p>
  
  <ol>
  <li>Format the modal in to two columns.</li>
  <li>Display image from a directory/folder in left column.</li>
  <li>Display text value (USUALLY PARAGRAPH/SENTENCES) from <code>.txt</code> file (in the same directory/folder as the <code>.jpg</code> file) in the right column.</li>
  <li>The right column should have scroll bar automatically when the text is too long.
  note: Not to use MySQL or database things.</li>
  </ol>
  
  <p>i have a code that checks if two files (.jpg and .txt) exist in a folder in cPanel after image click event (<em>this part works</em>). then it needs to display the value of the .txt file and the .jpg file in a modal pop up. my code below doesn't call echo the JS function for modal. but shows an alert box instead. the alert doesn't have the image but displays the codes for overlay () instead. </p>
  
  <p>index.php</p>
  
  <pre><code>&lt;div class="popup_anchor"&gt;
         &lt;div class="Thumb popup_element shadow clearfix" id="u2413"&gt;&lt;!-- group --&gt;
          &lt;img class="grpelem" id="u2471" alt="This Week's Events" src="images/blank.gif" onclick="readexisting()"/&gt;&lt;!-- state-based BG images --&gt;
         &lt;/div&gt;
        &lt;/div&gt;
  
  &lt;script&gt;
        function readexisting() {
             jQuery.ajax({
                type: "POST",
                url: 'controller.php',
                data: {action: 'readexisting', arguments: 'your data'}, 
                success:function(data) {
                                     data = data.split("~:~");
                                     alert(data[0]); // message
                                     //alert(data[1]); // content
                }
            });
        }
  </code></pre>
  
  <p></p>
  
  <p>controller.php</p>
  
  <pre><code>&lt;?php
      include_once("execute.php");
  
      $obj = new Model();
  
      switch($_POST["action"]){ 
          case 'readexisting': 
              $obj-&gt;readexisting();
          break;      
      } 
  ?&gt;
  </code></pre>
  
  <p>execute.php</p>
  
  <pre><code>    &lt;head&gt;
      &lt;style type="text/CSS"&gt;
       #overlay {
       display: block;
       position: absolute;
       left: 0px;
       top: 0px;
       width:100%;
       height:100%;
       text-align:center;
       z-index: 1500;
       visibility:hidden;
          }
      #overlay div {
       width:800px;
       margin: 100px auto;
       background-color: none;/*rgba(255, 255, 255, 0.9)*/
       border:none;
       padding:15px;
       text-align:center;
      }
      &lt;/style&gt;
  
  
      &lt;script type="text/javascript"&gt;
      function overlay() {
          el = document.getElementById("overlay");
          el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  }
   &lt;/script&gt;   
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div id="overlay"&gt;
       &lt;div&gt;
            &lt;img src="events/event-01.jpg" alt="module" style="width:230px; height:313px;"&gt;
            &lt;p&gt;&lt;a href='#close' onclick='overlay()'&gt;&lt;img src="images/close_btn.png" alt="module" style="width:15px; height:15px; position:relative; margin-left: 380px; top: -317px;"&gt;&lt;/a&gt;&lt;/p&gt;
       &lt;/div&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
          &lt;?php
          class Model {
  
  
             public function readexisting() {
                 if (file_exists($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.txt") &amp;&amp; file_exists($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.jpg")) {  
                      echo "&lt;script&gt;";
                       echo "overlay();";
                       echo "&lt;/script&gt;";
                      $myFile = ($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.txt");
                      $fh = fopen($myFile, 'r');
                      $theData = fread($fh, filesize($myFile));
                      fclose($fh);
                      echo $theData;                       
                 } 
                 else {
                      echo "The file $myFile does not exist";
                 }
             }
  
          }
          ?&gt;
  </code></pre>
  
  <p>i hope you can help me with this. i've been working on it for 3 days. please feel free to edit my code. thanks in advance!</p>