title: How to convert a child.jsp as modal or overlay using JavaScript?
body: <p>So here I want to call a child.jsp as a model using JavaScript. Previously I accessed the child jsp as <code>showmodaldialog and window.open()</code> using JavaScript. It works, but it is opening in another window. I want the child jsp in modal or overlay view.  Please help me to solve this. Thanks in advance.</p>
  
  <p>When function <code>showModDilog()</code> is called, the child jsp should be in modal view or in overlay view with the updated values.</p>
  
  <p>In other hand, I can also use this <code>(&lt;%@include file="child.jsp" %&gt;</code>) inside the body to include. But the values which I have passed, is not getting updated in child.jsp.</p>
  
  <p>*If you need more info about this, please feel free to comment. I really appreciate your help.</p>
  
  <pre><code>//function to call child.jsp from Parent.jsp
  function showModDilog(retVal,curVal,curRow,varPreVal)
      {
          var varRetVal = retVal;
          var varCurrentValue = curVal;
          var varCurrentRow = curRow;
          var varPreValue = varPreVal;
          qsUrl ="../FOLDER/ContentShowModalDialog.do?title="+"ORDER NO - "+varRetVal+" ALREADY EXISTS &amp;varCurrentValue="+varCurrentValue+"&amp;varCurrentRow="+varCurrentRow+"&amp;varPreValue="+varPreValue;
          if(navigator.appName =='Microsoft Internet Explorer')
          {
              event.keyCode=0;
          }   
          else
          {
              event.which=0;
          }   
          event.returnValue=0;
          if(getBrowser()=='IE')
          {
              var qsheight ='200';
              var args = new Object;
              args.window = window;
              returnval = showModalDialog(qsUrl, args);
          }
          else
          {
              var args = new Object;
              args.window = window.opener;
              returnval = window.open(qsUrl, args);
          }
      }
  </code></pre>
  
  <p>.css  used inside child jsp</p>
  
  <pre><code>.windowModal {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: #fff;
      background: -moz-linear-gradient(#fff, #999);
      background: -webkit-linear-gradient(#fff, #999);
      background: -o-linear-gradient(#fff, #999);
  }
  
  .windowModal:target {
      opacity:1;
      pointer-events: auto;
  }
  
  .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: 5px;
      text-align: center;
      top: 4px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
  }
  
  .close:hover { background: #00d9ff; }
  </code></pre>
  
  <p>HTML used inside child jsp</p>
  
  <pre><code> &lt;body class="windowModal" bgcolor="#FFCC99"&gt;
      &lt;div class=" close" style="width: 100%;overflow: auto;height: 100%;background-color: #F0E68C;"&gt;
  
          &lt;div  style="margin-top: 1%;"&gt;
          &lt;input type="button" class="close" name="Close" value="X" style="width:8%" onclick="winClose();" &gt;
          &lt;label class="labelbold" style="font-weight: bold; float:left;"&gt;NAME - &amp;nbsp; &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>