jQuery UI dialog实现dialog弹框显示

      实现弹框，比较精美的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" 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)

效果图：