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