实现弹框，比较精美的jQuery.ui.*；来实现，弹框显示：
jsp页面代码[jqueryuidialog.jsp]：
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery UI dialog</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/tsjs/jqueryui/css/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/tsjs/jqueryui/css/demos.css">
<style type="text/css">
.ui-widget-header{background-image:none;background-color:#EFF9FE}
.ui-widget-header{font-size:15px;}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryuidialog.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.button.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/jquery.ui.effect.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jqueryui/js/demo.js"></script>
</head>
<body>
<center>
<div><input type="text" style="border:0px solid #FFFFFF;" id="dialogmsg" name="dialogmsg" value="Dialog" /></div>
<div><input type="button" id="dialogbt" name="dialogbt" value="Dialog" /></div>
</center>
<div id="dialog"></div>
</body>
</html>
js代码：
$(document).ready(function(){
$("#dialogmsg").val("请点击确认dialog");
$("#dialogbt").click(function(){
var msghtml =
"<table>\n" +
" <tr>\n" +
" <td rowspan=\"2\"><img src=\"tsimg/loading.gif\" title=\"maven\" /></td>\n" +
" <td>可可爱</td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>474893293223324588345</td>\n" +
" </tr>\n" +
"</table>";
dialogS(msghtml,function(){
$("#dialogmsg").val("确认完毕");
});
});
});
function dialogS(msg,callback){
$("#dialog").html(msg);
$("#dialog").dialog({
autoOpen:true,
height:350,
width:400,
modal:true,
title:'确认',
buttons:{
"[yes]":function(){
$(this).dialog("close");
callback();
},
"[no]":function(){
$(this).dialog("close");
}
},
close:function(){
$(this).dialog("close");
}
});
}
注：此方式实现后，ie9上代码，弹框不居中，查阅资料，自己F12调试查找：
因为：ui-dialog下的inner style中的left=-2px；导致的，修改后发现可以居中，但没办法深入修改插件，内部style，还要兼容多种浏览器。
最终解决：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">修改为<!DOCTYPE html>居中显示了。(“可能”在特殊情况，提交后台数据为null)
效果图：
