title: modal popup in jsp
body: <p>i want my form to show a popup on clicking generate button. when the popup shows, the background should fade.</p>
  
  <p>below is the form which contains generate button.</p>
  
  <p></p>
  
  <pre><code>&lt;table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;"&gt;
          &lt;tr&gt;&lt;td id="ds_calclass"&gt;
              &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;form name="cashreciept" method="POST" action="/ColdStorage/cashreciept" id="cashreciept"&gt;
  
          &lt;div id="maindiv" &gt;
              &lt;div align="center"&gt;
                  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
                  &lt;p id="Title" align="center"&gt;CHANDNA COLD STORAGE
                  &lt;/p&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;p align="center" style="font-size: 21px"&gt;CASH RECIEPT&lt;/p&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;CASH RECIEPT DETAILS:&lt;/legend&gt;
                  &lt;table width="823" height="146" border="0" cellpadding="10"&gt;
                      &lt;tr&gt;
                          &lt;td width="155"&gt;AGREEMENT  NO.: &lt;/td&gt;
                          &lt;td width="272" height="56"&gt;&lt;input type="text" name="agrno" id="agrno" placeholder="Agreement No" value ="&lt;%=agrno%&gt;" &gt;
                              &lt;input type="button" name="Fill Details" id="fill details" value="FILL DETAILS" width="10px" height="10px" onClick="javascript:submitcash()"&gt;&lt;/td&gt;
  
  
                          &lt;td width="124"&gt;RECIEPT NO.:&lt;/td&gt;
                          &lt;td width="182" height="56"&gt;&lt;input type="text" name="Recieptno" id="Recieptno" placeholder="Reciept no" value="&lt;%=recno%&gt;"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                        &lt;td&gt;LOT NO.:&lt;/td&gt;
                          &lt;td height="78"&gt;&lt;input type="text" name="lotno" id="lotno" placeholder="Lot No" value ="&lt;%=agrno%&gt;/&lt;%=bags%&gt;"&gt; &lt;/td&gt;
  
  
                          &lt;td&gt;DATE : &lt;/td&gt;
                          &lt;td height="78"&gt;&lt;input onClick="ds_sh(this);" name="Date" readonly style="cursor: text" placeholder="Date" value="&lt;%=date2%&gt;" /&gt;&lt;br /&gt; &lt;/td&gt;
  
                      &lt;script type="text/javascript" src="js/calendar.js" lang="Javascript"&gt;&lt;/script&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/fieldset&gt;
              &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
              &lt;fieldset&gt;
  
                  &lt;legend&gt;STORAGE DETAILS:&lt;/legend
                  &gt;&lt;table width="823" border="0" cellpadding="10"&gt;
                      &lt;tr&gt;
                          &lt;td height="41"&gt;NAME:&lt;/td&gt;
                        &lt;td width="689"&gt;&lt;input name="Name" type="text" id="Name" placeholder="Name" width="400px" value="&lt;%=fname%&gt; &lt;%=lname%&gt;" size="40px"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td width="88" height="46"&gt;VILL/P.O:&lt;/td&gt;
                        &lt;td width="689"&gt;&lt;input type="text" name="Village" id="Village" placeholder="Village" width="400px" value="&lt;%=village%&gt;" size="40px" &gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;table width="823" border="0" cellpadding="10"&gt;
                      &lt;tr&gt;&lt;br&gt;&lt;br&gt;
                      &lt;td width="153"&gt;&lt;label&gt;PRODUCT NAME :&lt;/label&gt;&lt;/td&gt;
                      &lt;td width="624"&gt; POTATO&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
                &lt;table width="526" border="0" cellpadding="10"&gt;
                      &lt;tr&gt;
                          &lt;td width="144" height="80"&gt;&lt;p&gt;Wt(QTY)&lt;/p&gt;
                              &lt;p&gt;
                                  &lt;input name="Weight" type="text" id="weight" size="10" placeholder="Weight" value="&lt;%=wt%&gt;" &gt;
                              &lt;/p&gt;&lt;/td&gt;
                          &lt;td width="144" height="80" &gt;&lt;p&gt;BAGS&lt;/p&gt;
                              &lt;p&gt;
                                  &lt;input name="Bags" type="text" id="bags" size="10" placeholder="Bags" value="&lt;%=bags%&gt;" &gt;
                              &lt;/p&gt;&lt;/td&gt;
                          &lt;td width="144" height="80"&gt;&lt;p&gt;RATE
                              &lt;/p&gt;
                              &lt;p&gt;
                                  &lt;input name="Rate" type="text" id="rate" size="10" placeholder="Rate" value="&lt;%=rate%&gt;" &gt;
                              &lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/fieldset&gt;
              &lt;p&gt;&amp;nbsp;&lt;/p&gt;
            &lt;fieldset&gt;
                  &lt;legend&gt;&lt;/legend&gt;
                  &lt;legend&gt;PAYMENT DETAILS:
                  &lt;/legend&gt;
                  &lt;table width="94" border="0" cellpadding="10"&gt;
                      &lt;tr&gt;
                          &lt;td width="88" height="56"&gt;&lt;p&gt;AMOUNT&lt;/p&gt;
                              &lt;p&gt;
                                  &lt;input name="Amount" type="text" id="amount" size="10" placeholder="Amount" value="&lt;%=amt%&gt;" &gt;
                              &lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
  
                &lt;table width="823" height="78" border="0" cellpadding="10"&gt;
                      &lt;tr&gt;
                          &lt;td width="105" height="72"&gt;&lt;p&gt;ADVANCE
                              &lt;/p&gt;&lt;p&gt;
                                  -
                                  &lt;input name="Advance" type="text" id="advance" size="10" placeholder="Advance" value="&lt;%=advamt%&gt;"&gt;
                              &lt;/p&gt;&lt;/td&gt;
                          &lt;td width="134"&gt;&lt;p&gt;ADD AMOUNT
                              &lt;/p&gt;
                              &lt;p&gt;
                                  +
                                  &lt;input name="Addamt" type="text" id="addamt" size="10" placeholder="Additional amt"&gt;
                              &lt;/p&gt;&lt;/td&gt;
                          &lt;td width="138"&gt;&lt;p&gt;LESS AMOUNT&lt;/p&gt;
                              &lt;p&gt;
                                  -
                                  &lt;input name="Lessamt" type="text" id="lessamt" size="10" placeholder="Less Amount"&gt;
                              &lt;/p&gt;&lt;/td&gt;
                          &lt;td width="130"&gt;&lt;p&gt;POL AMOUNT&lt;/p&gt;
                              &lt;p&gt;
                                  +
                                  &lt;input name="Polamt" type="text" id="polamt" size="10" placeholder="Pol Amount"&gt;
                              &lt;/p&gt;&lt;/td&gt;
                          &lt;td width="204"&gt;&lt;p&gt;&lt;strong&gt;TOTAL AMOUNT&lt;/strong&gt;&lt;/p&gt;
                              &lt;p&gt;
                                  =
                                  &lt;input name="Total" type="text" id="total" size="10" placeholder="Total Amount" onfocus="javascript:totalamt()"&gt;
                              &lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
            &lt;/fieldset&gt;
            &lt;p&gt;&amp;nbsp;&lt;/p&gt;
              &lt;p&gt;GATE PASS :
                YES
                &lt;input name="radio" type="radio" id="YES"        onClick="MM_showHideLayers('Gatepass','','show','Print','','show')"  value="YES"/&gt;
                NO 
                &lt;input name="radio" type="radio" id="NO"     onClick="MM_showHideLayers('Gatepass','','hide','Print','','hide')"  value="NO"&gt;
            &lt;/p&gt;
              &lt;p&gt;
  </code></pre>
  
  <p>
                  </p>
                  <p>&nbsp; </p>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      
                      &nbsp;&nbsp;
                      
                  </p>
                  
                  
                  
                  <p>&nbsp;</p>
               
          
   
  whenever i click on generate buttoon it calls javascript function which in turn calls another jsp page which i want to show it as popup. </p>
  
  <p>that jsp page is </p>
  
  <pre><code>    &lt;body&gt;
  
      &lt;fieldset id="gatepass" class="popup"&gt;
  
          &lt;p align="center"&gt;&lt;span style="size: 40px; font-size: 24px; alignment-adjust:middle"&gt;CASH RECIEPT&lt;/span&gt;&lt;/p&gt;
  
  
          &lt;table width="453" border="0" align="center" cellpadding="20px"&gt;
              &lt;tr&gt;
                  &lt;td width="188" height="51"&gt;RECIEPT NO : 
                      &lt;label id="recno"&gt;&lt;%=recieptno%&gt;&lt;/label&gt;&lt;/td&gt;
                  &lt;td width="179"&gt;DATE : &lt;label id="date"&gt;&lt;%=date%&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td height="57"&gt;NAME : &lt;label id="name" &gt; &lt;%=firstname%&gt; &lt;%=lastname%&gt;&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;VILLAGE : &lt;label id="village"&gt; &lt;%=vill%&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;table width="697" height="52" border="0" align="center" cellpadding="20px"&gt;
              &lt;tr&gt;
                  &lt;td width="205"&gt;AGREEMENT NO : &lt;label id="agrno"&gt; &lt;%=agreno%&gt;&lt;/label&gt; &lt;/td&gt;
                  &lt;td width="149"&gt;LOT NO : &lt;label id="lotno"&gt;&lt;%=agreno%&gt;/&lt;%=bag%&gt;&lt;/label&gt;&lt;/td&gt;
                  &lt;td width="151"&gt;BAGS : &lt;label id="bags" &gt;&lt;%=bag%&gt;&lt;/label&gt;&lt;/td&gt;
                  &lt;td width="174"&gt; VEHICLE NO : &lt;label id="vehicle"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;table width="200" height="47" border="0" align="center" cellpadding="20px"&gt;
              &lt;tr&gt;
                  &lt;td&gt; TOTAL AMOUNT : 
                      &lt;label onloadstart="javascript:totalamt()" id="Totalamt" name ="total"&gt;&lt;/label&gt;&lt;/td&gt;
  
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;p align="center"&gt;
          &lt;p align="center"&gt;
              &lt;input type="button" name="Print" id="Print" value="PRINT"&gt;
              &lt;input type="button" name="close" id="close" value="CLOSE" onClick = "closePopup();"  /&gt; 
  
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
      &lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CAN ANYONE TELL ME HOW TO DO THIS?</p>