title: Modal Body content gets replaced : Twitter Bootstrap
body: <p>I am developing a website by using twitter bootstrap, smarty,jquery and php. and I am very new to Bootstrap.</p>
  <p>So I have prepared a page which collect applicant data.</p>
  <p><strong>html content</strong> :</p>
  <pre><code>{include file=&quot;admin/admin.header.tpl&quot;}
  &lt;div class=&quot;summary&quot;&gt;
      &lt;table class=&quot;table table-striped table-hover&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Applicant Name&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Mobile No.&lt;/th&gt;
                  &lt;th&gt;Details&lt;th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {foreach from=$totalApplicantSummary key=key item=value}
                  &lt;tr&gt;
                      &lt;td&gt;{$value.applicant_name}&lt;/td&gt;
                      &lt;td&gt;{$value.email}&lt;/td&gt;
                      &lt;td&gt;{$value.mobile}&lt;/td&gt;
                      &lt;td&gt;&lt;a data-toggle=&quot;modal&quot; href=&quot;?e={$value.email}&amp;fid={$formId}&quot; data-target=&quot;#myModal&quot; data-keyboard=&quot;false&quot;&gt;view more&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              {/foreach}
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div id=&quot;myModal&quot; class=&quot;modal hide fade in&quot; aria-hidden=&quot;true&quot; style=&quot;display: none;&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
              &lt;h3 id=&quot;myModalLabel&quot;&gt;Modal header&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot; &gt;
              &lt;h1&gt;Hi&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;button class=&quot;btn btn-primary&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;/button&gt;
          &lt;/div&gt;
          &lt;!-- Modal --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  {include file=&quot;admin/admin.footer.tpl&quot;}
  </code></pre>
  <p>NB: <strong>admin.footer.tpl</strong> contains bootstrap.min.js and jquery.min.js .</p>
  <p><strong>What I want to do?</strong></p>
  <p>To view total applicant data I have given <strong>view more</strong> link which will be displayed  in a
  MODAL.</p>
  <p>I have defined the modal as &quot;#myModal&quot; and for testing <strong>&quot;HI....&quot;</strong> as MODAL BODY CONTENT.</p>
  <p><strong>What is my problem?</strong></p>
  <p><strong>View more</strong> link shows <strong>MODAL</strong> which contains the  previous content (total page i.e applicant name, email, mobile along with header ,footer) instead of &quot;HI....&quot;.</p>
  <p>So how to display <strong>Hi...</strong> instead of the whole page content.</p>
  <p>thanks in advance.</p>
  <p>For better reference to problem images of output are provided.</p>
  <p>Before view more link is clicked :</p>
  <p><img src="https://i.stack.imgur.com/ygS8k.png" alt="enter image description here" /></p>
  <p>Modal content after the link is clicked:</p>
  <p><img src="https://i.stack.imgur.com/XTwVg.png" alt="enter image description here" /></p>