在jsp中js jquery点击按钮出现一个对话框的实现

对话框JSP页面

customerSearchDialog.jsp

<div id="searchForm" class="jqmWindow">
<div id="jqmTitle">
<button class="jqmClose">X</button>
<span id="jqmTitleText1"></span>输入查询条件
</div>
<div id="mainPanel">
<table class="panel">
<thead>
<tr>
<td><label>客户编号：</label></td>
<td><s:textfield id="map.customerCode" name="map.customerCode" /></td>
</tr>
<tr>
<td><label>客户名称：</label></td>
<td><s:textfield id="map.customerName" name="map.customerName" /></td>
</tr>
<tr>
<td><label>地区名称：</label></td>
<td><s:textfield id="map.districtName" name="map.districtName" /></td>
</tr>
<tr>
<td><label>专营业务员：</label></td>
<td><s:textfield id="map.salesManName" name="map.salesManName" /></td>
</tr>
<tr>
<td><label>发展日期：</label></td>
<td><s:textfield id="map.beginDate" name="map.beginDate" />-<s:textfield id="map.endDate" name="map.endDate" /></td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#"
onClick="loadGoodsPage();"><img
src='<%=ctxPath%>/image/admin/btn_search.gif' />查询</a> <a href="#"
onClick="clears();"><img
src='<%=ctxPath%>/image/admin/btn_search.gif' />清除条件</a></td>
</tr>
</thead>
</table>
</div>
<div class="jqHandle jqResize"></div>
</div>
<script type='text/javascript'>
function showSearchDialog(){
showModal1("#searchForm",430,580);
$(document.getElementById('map.beginDate')).datepicker({
      changeMonth: true,
      changeYear: true,        
      dateFormat:'yy-mm-dd' 
});  
$(document.getElementById('map.endDate')).datepicker({
      changeMonth: true,
      changeYear: true,        
      dateFormat:'yy-mm-dd' 
});  
}

JSP页面

<div class="titleBar">
<span style="float: left;">参数管理-客户档案</span><br/>
<span style="float: right"><a href="slPamCustomerEdit.do?action=add"><img src='<%=ctxPath%>/image/admin/btn_add.gif'/>增加</a> </span>
<span style="float: right"><a href="javascript:void(0);" onClick="showSearchDialog()"><img src='<%=ctxPath%>/image/admin/btn_search.gif'/>快速查询</a></span>
</div>

<s:form id="mainForm" name="mainForm" action="slPamCustomer" namespace="/sl" method="post">

<div id="mainPanel">
<table class="cssraindemo2">
<thead>
<tr>
<th>客户编码</th><th>客户名称</th><th>客户简称</th><th>地区名称</th><th>发展日期</th><th>联系人</th><th>电话</th><th width="120px">操作</th>
</tr>
</thead>
<tbody id="main">   
<c:forEach items="${page.result}" var="customer" varStatus="status">
 <tr>
    <td>${customer.code}</td>
    <td>${customer.name}</td>
    <td>${customer.abbr}</td>
    <td>${customer.districtName}</td>
    <td><fmt:formatDate value="${customer.developDate}"/></td>    
    <td>${customer.businessContact}</td>
    <td>${customer.officePhone}</td>
    <td nowrap>                 
                  <a href="slPamCustomerEdit.do?action=edit&id=${customer.id}"><img src="<%=ctxPath%>/image/admin/btn_edit.gif"/>修改</a>
                  <a href="#" onClick="del(${customer.id});"><img src="<%=ctxPath%>/image/admin/btn_delete.gif"/>删除</a>
</td>
 </tr>
</c:forEach>

</tbody>
</table>
<br>
<app:page pageNo="${pageNo}"  recordCount="${page.recordCount}"  pageSize="${pageSize}"  url="${ctxPath}sl/slPamCustomer.do" formName="mainForm"/>
</div>
<%@include file="customerSearchDialog.jsp" %>
</s:form>