layer弹窗

一、导入layer插件文件（我的下载里面有资源）

如图： 

二、引入资源

<script src="${base}/vender/layer-v2.1/layer/layer.js"></script>

三、Freemarker页面 代码

<a   οnclick="confirmDelete('${x.lawId!}','')"  >删除</a>

<div id="dialog">
<div id="confirmDelete" style="display: none">
	<div style="padding: 10px;">
		<div>确定要删除吗？</div>
		<div><label id="id"></label></div>
	</div>
</div>
</div>

四、js代码：

function confirmDelete(id, param) {
	var mydom = $('#confirmDelete');
	var href = base + "/law/deleteLaw/" + id;
	$('#confirmDelete #id').text(param);
	layer.open({
		type : 1,
		shadeClose : false,
		// area : [ '500px', '300px' ],
		title : "确认",
		content : mydom,
		btn : [ '确定', '取消' ],
		btn1 : function(index, layero) {
			window.location.href = href;
			layer.close(index);
		},
		btn2 : function(index) {
			layer.close(index);
		},
		success : function(layero, index) {
			mydom.show();
		},
		end : function() {
			mydom.hide();
		},
	});}

五、一般情况就完成了，但可能会出现弹窗无法点击的问题，需在最外层页面加入如下js代码。

function showdialog(mask) {
	var getid = "#mydialog";
	var mask = "1";
	var width = "30%";
	var detail = "";
	var masklayout = $('<div class="dialog-mask"></div>');
	if (width == null) {
		width = "80%";
	}

	if (mask == "1") {
		$("body").append(masklayout);
	}
	detail = '<div class="dialog-win" style="position:fixed;width:' + width
			+ ';z-index:11;">';

	if (getid != null) {
		detail = detail + $(getid).html();
	}

	detail = detail + '</div>';

	var win = $(detail);
	win.find(".dialog").addClass("open");

	$("body").append(win);
	var x = parseInt($(window).width() - win.outerWidth()) / 2;
	var y = parseInt($(window).height() - win.outerHeight()) / 2;
	if (y <= 10) {
		y = "10";
	}
	win.css({
		"left" : x,
		"top" : y
	});

	win.find(".dialog-close,.close").each(function() {
		$(this).click(function() {
			win.find(".dialog-myBOBD1").each(function() {
				myprivate();
			});
			win.remove();
			$('.dialog-mask').remove();
		});
	});
	
	win.find(".dialog-wclose").each(function() {
		$(this).click(function() {
			window.close();
		});
	});
	
	win.find(".dialog-myBOBD1").each(function() {
		$(this).click(function() {
			myprivate();
			win.remove();
			$('.dialog-mask').remove();
		});
	});

	win.find(".dialog-ok").each(function() {
		$(this).click(function() {
			myconfirm();
			win.remove();
			$('.dialog-mask').remove();
		});
	});

	masklayout.click(function() {
		win.remove();
		$(this).remove();
	});
};

以下是效果图：

如果使用angularjs ，以下是对应的js提交代码

	// 删除确认对话框表示
	$scope.deletegift = function() {//TODO
		// 选中对象确认
		var intCount = 0;
			for (var i = 0; i < $scope.giftList.length; i++) {
		
				if ($scope.giftList[i].ISCHECK2 == true) {
					intCount++;
				}
			}
	
		if (intCount == 0) {
			$scope.error = "请选择删除对象。";
			return;
		}
		var title = "确认";

		$scope.confirmContent = '确定要删除吗？';

		var mydom = $('#confirmDlg');
		layer.open({
			type : 1,
			shadeClose : false,
			area : [ '450px', '160px' ],
			title : title,
			content : mydom,
			btn : [ '确定', '取消' ],
			btn1 : function(index, layero) {
			},
			btn2 : function(index) {
				layer.close(index);
			},
			yes : function(index, layero) {
				layer.close(index);
				delObj2();
			},
			success : function(layero, index) {
				mydom.show();
			},
			end : function() {
				mydom.hide();
			},
		});
	};
	function delObj2() {
		$scope.error = "";
		var idList = "";
		// 获取要删除的数据
		if ($scope.giftList&& $scope.giftList.length > 0) {
			for (var i = 0; i < $scope.giftList.length; i++) {
				if ($scope.giftList[i].ISCHECK2 == true) {
					if (idList != "") {
						idList += ",";// 以逗号分隔
					}
					idList += $scope.giftList[i].giftId;
				}
			}
		}
		if (idList != "") {
			$http({
				method : "post",
				url : "find/deleteGift",
				data : {
					"idList" : idList
				}
			}).success(function(rs, status, headers, config) {
				chkSession(rs);
				if (rs.status == 0) {
					// 更新后数据表示
					$scope.inittable();
					select();
					$scope.success = rs.message;
				} else {
					$scope.error = "操作失败。";
				}
			}).error(function(rs, status, headers, config) {
				$scope.error = "操作时，发生系统异常。";
			});
		}
	};