jQuery UI dialog实现dialog弹框显示

最新推荐文章于 2020-05-15 08:47:08 发布

weixin_33923762

最新推荐文章于 2020-05-15 08:47:08 发布

阅读量294

点赞数

文章标签： ui java javascript ViewUI

原文链接：https://yq.aliyun.com/articles/58347

版权

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

效果图：

weixin_33923762

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI dialog实现dialog弹框显示

实现弹框，比较精美的jQuery.ui.*；来实现，弹框显示： jsp页面代码[jqueryuidialog.jsp]：<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><%String path = request.get...
复制链接

扫一扫