title: Colorbox with parent.html
body: <p>I need a little help here as I'm still a beginner. What I'm trying to achieve is this,</p>
  
  <p>main.php - a table with 2 columns and colorbox on the Name when click will have a form to edit(edit.php). And a add colorbox form(add.php) to add new entries.  </p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
       &lt;link rel="stylesheet" href="css/colorbox.css" /&gt;
           &lt;script src="js/jquery.colorbox.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $(".edit").colorbox({iframe:true, width:"90%", height:"90%", onOpen:function() { $("body").css("overflow", "hidden"); }, onClosed:function() { $("body").css("overflow", "auto");}});
  $(".add").colorbox({iframe:true, width:"90%", height:"90%", onOpen:function() { $("body").css("overflow", "hidden"); }, onClosed:function() { $("body").css("overflow", "auto");}});
  });
  &lt;/script&gt;
      &lt;a href="add.php" class="add"&gt;Add new&lt;/a&gt;
      &lt;table id="tablecontent"&gt;
       &lt;tr&gt;
        &lt;td&gt;Name&lt;/td&gt;
        &lt;td&gt;Tel&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tbody id="tbody"&gt;
  
       &lt;/tbody&gt;
       &lt;tr&gt;
        &lt;td&gt;&lt;a href="edit.php?id=1" class="edit"&gt;John&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;1234567&lt;/td&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>add.php - After submitting, a new <code>&lt;tr&gt;</code> will be inserted into the main.php  <code>&lt;tbody&gt;</code>. If I just put <code>class="add"</code> it will not work, so I figured out adding cboxElement behind add, but is not working correctly</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;form method="post"&gt;
  Name:&lt;input type="text" name="name" /&gt;
  Tel:&lt;input type="tel" name="tel" /&gt;
  &lt;input type="submit"&gt;
  &lt;/form&gt;
  &lt;? if($_POST){?&gt;
  &lt;script&gt;
  $(document).ready(function(){
  window.parent.$("#tbody").html(parent.$("#tbody").html() + '&lt;tr&gt;&lt;td&gt;&lt;a href="edit.php?&amp;id=2" class="add cboxElement"&gt;&lt;?=$_POST[name]?&gt;&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;?=$_POST[tel]?&gt;&lt;/td&gt;&lt;/tr&gt;') ;
  }); 
  &lt;/script&gt;
  &lt;? }?&gt;
  </code></pre>
  
  <p>edit.php - a form to edit the entries by getting the id and call the database</p>
  
  <pre><code>&lt;? $id = $_GET['id']; ?&gt;
  &lt;form method="post"&gt;
  Name:&lt;input type="text" name="name" /&gt;
  Tel:&lt;input type="tel" name="tel" /&gt;
  &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The problem I have is, when a new <code>&lt;tr&gt;</code> is inserted into the parent(main.php) when I click the name to edit, the colorbox(edit.php) did not show exactly as per what is called in main.php; the width and the height. And when I click submit in edit.php, the colorbox just close and the new <code>&lt;tr&gt;</code> is gone. </p>