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

来源:转载

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;}

分享给朋友:
您可能感兴趣的文章:
随机阅读: