jQuery UI dialog实现dialog弹框显示

来源：互联网发布：网络不通怎么排查编辑：程序博客网时间：2024/06/07 04:36

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

效果图：

0 0