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" onchange="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>
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" onchange="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;
}
