Sample model popup using JSP
popup.jsp
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for( var i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
</script>
<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
<style type="text/css">
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 200%;
width: 200%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 552;
height: 400;
top: 30%;
left: 40%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: white;
text-decoration: none;
}
.align_right
{
text-align: right;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnShowModal").click(function (e)
{
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e)
{
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
</head>
<body>
<input type="button" id="btnShowModal" value="Advance Search" />
<form id="form1" action="one.jsp">
<br /><br />
<div id="output"></div>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Advanced Property Search</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
</table>
<table width="550" border="1" cellpadding="2" cellspacing="1" class='altrowstable' id='alternatecolor' align="top">
<tr>
<td align="right"><font face="Times New Roman">I Want To:</font>
</td>
<td align="left"><input type="radio" name="prop_type" value="Rent">
Rent <input type="radio" name="prop_type" value="Sale">
Sale
</td>
<td align="right">Looking For:
</td>
<td> <select name="property_type" >
<option value="null">--Property type--</option>
<optgroup label="ALL RESIDENTIAL"></optgroup>
<option value="Residential Plot">Residential Plot</option>
<option value="Residential House">Residential House</option>
<option value="Multistorey Apartment">Multistorey Apartment</option>
<option value="Builder Floor Apartment">Builder Floor Apartment</option>
<option value="Service Apartment">Service Apartment</option>
<option value="Villa">Villa</option>
<option value="Holiday Home">Holiday Home</option>
<optgroup label="ALL COMMERCIAL"></optgroup>
<option value="Office in IT Park/ SEZ">Office in IT Park/ SEZ</option>
<option value="Commercial Land">Commercial Land</option>
<option value="Commercial Office Space">Commercial Office Space</option>
<option value="Commercial Shop">Commercial Shop</option>
<option value="Commercial Showroom">Commercial Showroom</option>
<option value="Kiosk">Kiosk</option>
<option value="Hotel">Hotel</option>
<option value="Hotel Sites">Hotel Sites</option>
<option value="Guest House">Guest House</option>
<option value="Business Centre">Business Centre</option>
<option value="Warehouse/ Godown">Warehouse/ Godown</option>
<option value="Industrial Land">Industrial Land</option>
<option value="Industrial Building">Industrial Building</option>
<option value="Industrial Shed">Industrial Shed</option>
<optgroup label="ALL AGRICULTURAL"></optgroup>
<option value="Agricultural Land">Agricultural Land</option>
<option value="Farm House">Farm House</option>
</select>
</td>
</tr>
<tr>
<td align="right"><font face="Times New Roman">City:</font>
<td align="left">
<select name="property_city">
<option value="null">--Please select-- </option>
<option value="Pune">Pune </option>
<option value="Mumbai">Mumbai </option>
<option value="Dehli">Dehli </option>
<option value="Bangalore">Bangalore </option>
<option value="Channai">Chennai </option>
<option value="Hyderabad">Hyderabad </option>
<option value="Kolkatta">Kolkatta </option>
</select>
</td>
<td align="right"><font face="Times New Roman">Locality:</font>
</td>
<td align="left">
<input type="text" name="property_locality" size=16>
</td>
</tr>
<tr>
<td align="right"><font face="Times New Roman">Budget:</font>
</td>
<td align="left">
<select name="pmin_budget">
<option value="null">--Please select--</option>
<option value="1">1 lacks</option>
<option value="2">2 lacks</option>
<option value="3">3 lacks</option>
<option value="4">4 lacks</option>
<option value="5">5 lacks</option>
<option value="6">6 lacks</option>
<option value="7">7 lacks</option>
<option value="8">8 lacks</option>
<option value="9">9 lacks</option>
<option value="10">10 lacks</option>
</select>
</td>
<td align="center">
<font face="Times New Roman">To</font>
</td>
<td align="left">
<select name="pmax_budget">
<option value="null">--Please select--</option>
<option value="1">1 coros</option>
<option value="2">2 corors</option>
<option value="3">3 corors</option>
<option value="4">4 corors</option>
<option value="5">5 corors</option>
<option value="6">6 corors</option>
<option value="7">7 corors</option>
<option value="8">8 corors</option>
<option value="9">9 corors</option>
<option value="10">10 corors</option>
</select>
</td>
</tr>
<tr>
<td align="right"><font face="Times New Roman">BedRooms:</font>
</td>
<td align="left">
<select name="bedrooms">
<option value="null">--Please select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value=">10">>10</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<font face="Times New Roman">Covered Area:</font>
</td>
<td><input type="text" name="min_area">
</td>
<td align=center><font face="Times New Roman">To</font>
</td>
<td><input type="text" name="max_area" size=10>
<select name="covered-unit">
<option value="null">--Unit--</option>
<option value="1">Sq-ft </option>
<option value="2">Sq-m </option>
<option value="3">Sq-yrd </option>
</select>
</td>
</tr>
<tr>
<td align="right"><font face="Times New Roman">Plot Area:</font>
</td>
<td><input type="text" name="plotmin_area">
</td>
<td align=center><font face="Times New Roman">To</font>
</td>
<td><input type="text" name="plotmax_area" size=10>
<select name="plot-unit">
<option value="null">--Unit--</option>
<option value="1">Sq-ft </option>
<option value="2">Sq-m </option>
<option value="3">Sq-yrd </option>
</select>
</td>
</tr>
<tr>
<td align="right"><font face="Times New Roman">Transaction:</font>
</td>
<td align="left" colspan="3"><input type="radio" name="transaction_type" value="New Property">New Property
<input type="radio" name="transaction_type" value="Resale">ReSale
<input type="radio" name="transaction_type" value="New/Resale">Both
</td>
</tr>
<tr>
<td align="right"><font face="Times New Roman">Possession Status:</font>
</td>
<td align="left" colspan="3"><input type="radio" name="possession_ptatus" value="under development">Under development
<input type="radio" name="possession_status" value="Ready">Ready to Move
</td>
</tr>
<tr>
<td align="left"><font face="Times New Roman">Age Of Construction :</font>
</td>
<td align="left">
<select name="age_of_construction">
<option value="Null">--Construction Age--</option>
<option value="0">New Construction </option>
<option value="0">less than 5 years </option>
<option value="0">5 To 10 years </option>
<option value="0">10 To 15 years </option>
<option value="0">15 To 20 years </option>
<option value="0">Above 20 years </option>
</select>
</td>
<td align="right"><font face="Times New Roman">Floor No:</font>
</td>
<td align="left">
<select name="minfloorno">
<option value="null">--Min--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<font face="Times New Roman"> To</font>
<select name="maxfloorno">
<option value="null">--Max--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<font face="Times New Roman">Furnished:</font>
</td>
<td align="left">
<select name="furnish">
<option value="null">--select--</option>
<option value="All">All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
</td>
<td align="right">
<font face="Times New Roman">Keywords:</font>
</td>
<td>
<input type="text" name="keywords" value="project,Builder etc..">
</td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="submit" value="Search Property">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
AryanTech India pune
