如何控制jquery ui弹窗下方按钮水平居中

╰+攻爆jí腚メ 2022-06-09 22:52 193阅读 0赞

1、问题背景

一般情况下，jquery ui弹窗下方的按钮是居右的，但是有时系统为了达到美观统一，需要将按钮放在中间

2、问题原因

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>如何使jquery ui弹窗下方按钮水平居中</title>
    		<link rel="stylesheet" href="../js/jquery-ui-1.10.4/themes/base/jquery.ui.all.css">
    		<script src="../js/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
    		<script src="../js/jquery-ui-1.10.4/ui/jquery-ui.js"></script>
    		<style>
    			.ui-progressbar {
    				height: 10px;
    			}
    			
    			#dialogFile {
    				min-height: 0px !important;
    			}
    		</style>
    		<script>
    			$(function() {
    				$("#dialogInfo").dialog({
    					resizable: false,
    					title: '新增',
    					height: 500,
    					width: 420,
    					modal: true,
    					buttons: {
    						"关闭": function() {
    							$(this).dialog("close");
    						}
    					}
    				});
    
    				$("#dialogFile").dialog({
    					autoOpen: false,
    					closeOnEscape: false,
    					resizable: false,
    					modal:true
    				});
    
    				$("#progressbar").progressbar({
    					value: false,
    					complete: function() {
    						$(".ui-dialog button").last().trigger("focus");
    					}
    				});
    			});
    
    			function openWin(obj) {
    				var fileUpload = $(obj).val();
    				checkFileSize(obj);
    				if(fileUpload) {
    					$("#dialogFile").prev().css("display","none");
    					$("#dialogFile").dialog("open");
    				}
    			}
    
    			function checkFileSize(obj) 
    			{
    				var filePath = $(obj).val();
    				var fileStart = filePath.lastIndexOf(".");
    				var endFile = filePath.substring(fileStart, filePath.length).toUpperCase();
    				if(endFile != ".PNG" && endFile != ".JPG" && endFile != ".GIF") 
    				{
    					hiAlert("文件限于png,jpg或gif格式");
    					return false;
    				}
    			
    				var img = new Image();
    				img.src = filePath;
    				if(img.fileSize > 0) 
    				{
    					if(img.fileSize > 20 * 1024 * 1024) 
    					{
    						hiAlert("上传的文件大小不能超过20M!");
    						return false;
    					}
    				}
    				return true;
    			}
    		</script>
    	</head>
    
    	<body>
    		<div id="dialogInfo" title="弹窗信息">
    			<input type="file" οnchange="openWin(this);" />
    		</div>
    
    		<div id="dialogFile" style="height:50px;width:290px;">
    			<div class="progress-label" style="width:100%;text-align:center;">正在上传...</div>
    			<div id="progressbar"></div>
    		</div>
    	</body>
    
    </html>

![Image 1][]

3、解决办法

需要添加样式

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>如何使jquery ui弹窗下方按钮水平居中</title>
    		<link rel="stylesheet" href="../js/jquery-ui-1.10.4/themes/base/jquery.ui.all.css">
    		<script src="../js/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
    		<script src="../js/jquery-ui-1.10.4/ui/jquery-ui.js"></script>
    		<style>
    			.ui-progressbar {
    				height: 10px;
    			}
    			
    			#dialogFile {
    				min-height: 0px !important;
    			}
    			.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
    				text-align: center;
    				float: none;
    			}
    		</style>
    		<script>
    			$(function() {
    				$("#dialogInfo").dialog({
    					resizable: false,
    					title: '新增',
    					height: 500,
    					width: 420,
    					modal: true,
    					buttons: {
    						"关闭": function() {
    							$(this).dialog("close");
    						}
    					}
    				});
    
    				$("#dialogFile").dialog({
    					autoOpen: false,
    					closeOnEscape: false,
    					resizable: false,
    					modal:true
    				});
    
    				$("#progressbar").progressbar({
    					value: false,
    					complete: function() {
    						$(".ui-dialog button").last().trigger("focus");
    					}
    				});
    			});
    
    			function openWin(obj) {
    				var fileUpload = $(obj).val();
    				checkFileSize(obj);
    				if(fileUpload) {
    					$("#dialogFile").prev().css("display","none");
    					$("#dialogFile").dialog("open");
    				}
    			}
    
    			function checkFileSize(obj) 
    			{
    				var filePath = $(obj).val();
    				var fileStart = filePath.lastIndexOf(".");
    				var endFile = filePath.substring(fileStart, filePath.length).toUpperCase();
    				if(endFile != ".PNG" && endFile != ".JPG" && endFile != ".GIF") 
    				{
    					hiAlert("文件限于png,jpg或gif格式");
    					return false;
    				}
    			
    				var img = new Image();
    				img.src = filePath;
    				if(img.fileSize > 0) 
    				{
    					if(img.fileSize > 20 * 1024 * 1024) 
    					{
    						hiAlert("上传的文件大小不能超过20M!");
    						return false;
    					}
    				}
    				return true;
    			}
    		</script>
    	</head>
    
    	<body>
    		<div id="dialogInfo" title="弹窗信息">
    			<input type="file" οnchange="openWin(this);" />
    		</div>
    
    		<div id="dialogFile" style="height:50px;width:290px;">
    			<div class="progress-label" style="width:100%;text-align:center;">正在上传...</div>
    			<div id="progressbar"></div>
    		</div>
    	</body>
    
    </html>

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
    	text-align: center;
    	float: none;
    }

![Image 1][]

[Image 1]: