JSP页面dialog弹出层

最新推荐文章于 2019-11-12 13:36:29 发布

zhiyonghafu

最新推荐文章于 2019-11-12 13:36:29 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： java开发经验文章标签：自定义dialog弹出层

本文链接：https://blog.youkuaiyun.com/zhiyonghafu/article/details/44775219

java开发经验专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在JSP页面中创建自定义的dialog弹出层。首先展示了用于实现弹出层的脚本代码，接着提到dialog所显示的div元素初始设置为隐藏。此外，还提供了关闭dialog的脚本细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.脚本代码

    function showCreate(){
    	$('#createDialog').dialog({
    			title : '新增客户经理'
   			},{
   				height : 580
		  	},{
				width : 780
			},{
				resizable : true
			},{
				modal : true
			},{
				show : 'clip'
			}
		);
    }

2.触发按钮代码

	<input type="button" class="createBtn" onclick="showCreate();" value="新增" />

3.需要在dialog中显示的div 默认设置为display:none;

<div class="formPanel" id="createDialog" style="display:none;">
		<form id="saveCusmanagerAjax" action="${ctx}/bns/loanAjax/LoanCusmanager/save.do" method="post">
		<div class="formPanelBody">
			<table class="formTable" cellpadding="0" cellspacing="0">
   				<tr>
					<td class="tdLabel">
						<span class="required"></span>省份编号:
					</td>
					<td  >
						<input value="" id="provinceNo" name="provinceNo"    />
					</td>
					<td class="tdLabel">
						<span class="required"></span>省份名称:
					</td>
					<td  >
						<input value=" " id="province" name="province"    />
					</td>
				</tr>
				<tr>
					<td class="tdLabel">
						<span class="required"></span>市区编号:
					</td>
					<td  >
						<input value=" " id="cityNo" name="cityNo"    />
					</td>
					<td class="tdLabel">
						<span class="required"></span>市区名称:
					</td>
					<td  >
						<input value=" " id="city" name="city"    />
					</td>
				</tr>
				<tr>
					<td class="tdLabel">
						<span class="required"></span>部门编号:
					</td>
					<td  >
						<input value=" " id="deptNo" name="deptNo"    />
					</td>
					<td class="tdLabel">
						<span class="required"></span>部门名称:
					</td>
					<td  >
						<input value=" " id="dept" name="dept"    />
					</td>
				</tr>
				<tr>
					<td class="tdLabel">
						<span class="required"></span>团队编号:
					</td>
					<td  >
						<input value=" " id="teamNo" name="teamNo"    />
					</td>
					<td class="tdLabel">
						<span class="required"></span>团队名称:
					</td>
					<td  >
						<input value=" " id="team" name="team"    />
					</td>
				</tr>
				<tr>
					<td class="tdLabel">
						<span class="required"></span>经理编号:
					</td>
					<td  >
						<input value=" " id="managerNo" name="managerNo"  />
					</td>
					<td class="tdLabel">
						<span class="required"></span>经理姓名:
					</td>
					<td  >
						<input value=" " id="manager" name="manager"    />
					</td>
				</tr>
				<tr>
					<td class="tdLabel">
						<span class="required"></span>是否启用:
					</td>
					<td colspan="3" >
						<input value=" " id="isused" name="isused"    />
					</td>
				</tr>
   			</table>
    	</div>
    	<div class="formPanelFoot">
    		<table cellpadding="0" cellspacing="0">
    			<tr>
    				<td>
    					<input id="submitButton" onclick="saveCusmanagerByAjax();" type="button" value="提交" />
    					<input type="button" value="后退" onclick="history.back();" />
    				</td>
    			</tr>
    		</table>
    	</div>
		</form>
    </div>

4.关闭dialog的脚本代码:

    function closeDialog(){
		$('.dialog').dialog('close');
	}