java实现弹窗 javaweb弹窗

方法一：

需求：

页面上有个“查看”按钮，点击按钮，弹出一个窗口，在窗口内可以进行编辑操作，点击“保存”，保存内容到数据库，并将结果回显到页面上。

③中的标签对应的js

<script type="text/javascript">


	function ${id}_click(paramters) {
		$("#${id}").html('<iframe src="${url}/' + paramters + '" frameborder="0" style="border:0" id="${id}_dialogFrame" width="100%" height="100%"></iframe>'); 	
		$('#${id}').dialog({
			title: "${title}",
			width: "${width}",
		    height: "${height}",
		    modal: true, 
		    /*  buttons: [
						{
							html: "<i class='ace-icon fa fa-trash-o bigger-110'></i>  确定",
							"class" : "btn btn-danger btn-xs",
							click: function() {								
								$("#${id}_dialogFrame").contents().find("#dialogform").attr("action","${submitUrl}" ).submit();
								//$( this ).dialog( "close" );
								//document.location.reload();
							}
						}
						,
						{
							html: "<i class='ace-icon fa fa-times bigger-110'></i>  取消",
							"class" : "btn btn-xs",
							click: function() {
								$( this ).dialog( "close" );
							}
						} 
					]  */

		       
		    });
		}
</script>

弹出窗口内容对应的页面

点击“保存”按钮，执行后台方法，并跳转到另一个页面，此时这个页面任然是处于这个弹出窗口内的，如何解决这个问题呢？

在这个新跳转的页面写个JS方法，重新加载父页面，也就是最初“查看”按钮所在的页面即可

<script>
jQuery(function($) {
	var flag = '${flag}';
	if (flag == 1) {
		history.back();
	} else {
		parent.location.reload(); 
	}
});
</script>

方法二：

需求：

有这样一个页面，需要选择其他的实体类作为外键的值，点击“搜索”按钮，弹出一个窗口，显示所有可用的列表，然后勾选其中一个，点击“选择”按钮，即可将选择项的主键返回到页面

<myform:entityselector id="departmentId" required="true"
	height="700" width="1024" url="${ctx}/dialog/department/list" //对应的弹出窗口内容的url
	dialogtitle="${i18n_personDepartmentTitle}" title="部门" tableId="departmentListTable"
	tableDisplayNameColumnName="name" valueId="${person.departmentId}"
	value="${person.departmentName}" ></myform:entityselector>

该标签对应的主要内容

<div class="control-group">
	<input type="hidden" id="${id}" name="${id}" value="${valueId}">
	<label class="control-label" for="${id}"><b>${title}</b> <c:if test="${required eq true}"><font color="red"><b> *</b></font></c:if></label> 


	 <div class="controls">
		
        <div class="input-append">
            <input type="text" id="${id}_text" name="${id}_text"  class="${size}" value="${value}" readonly="readonly"/>
            <button id="${id}_button" type="button" class="btn btn-info"><i class="icon-search"></i></button>
            <button id="${id}_button_trash" type="button" class="btn btn-info"><i class="icon-trash"></i></button>
        </div>
    </div>

</div>
<script type="text/javascript">
jQuery(function($) {

	$('#${id}_button').on('click', function (e) {

		layer.open({
			type: 2,
			title: "${dialogtitle}",
			maxmin: true,
			shadeClose: true,
			area : ['${width}px' , '${height}px'],
		    content:  '${url}',
		    btn: ['选择', '关闭'],
		    success: function(layero, index){
		    	var body = layer.getChildFrame('body', index);
		    	 body.find("input[name=${tableId}_rowcheck][value='" + $("#${id}").val() +  "']").attr("checked","checked");	
		      },
		    yes: function(index, layero){
				var selectedIds = [];
				var body = layer.getChildFrame('body', index);
				body.find("#${tableId}_rowcheck:checked").each(function() {
					selectedIds.push($(this).val());
				});
				
				if (selectedIds.length > 1) {
					alert("只能选择一个！");
				} else {
					if (selectedIds.length == 1) {
						$("#${id}").val(selectedIds[0]);
						$("#${id}_text").val(body.find("#${tableDisplayNameColumnName}_" + selectedIds[0]).html()); 
					} else if(selectedIds.length == 0) {
						alert("没有选择任何的, 数据将清空！");
						$("#${id}").val(0);
						$("#${id}_text").val(""); 
					}
				}

		        layer.close(index); //如果设定了yes回调，需进行手工关闭
		      },
		      btn2: function(index, layero){
		    	    //按钮【按钮二】的回调
		    	     layer.close(index); //如果设定了yes回调，需进行手工关闭
		     },
		      cancel: function(index){ return true; }
			});	
		});
	
	$('#${id}_button_trash').on('click', function (e) {

		$("#${id}").val(0);
	    $("#${id}_text").val(""); 
	});
	});
</script>

 同理，这里的layer也可以替代方法一，其他同方法一