如何控制jquery ui弹窗下方按钮水平居中
2017-08-04 20:32
429 查看
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>
一般情况下，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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一屏只显示横向排列的四张图片，如何控制点击“向下”按钮过快，导致出现图片不能在一屏中垂直居中显示?
- css如何让两个并列的按钮 水平居中显示
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
- 如何用按钮控制循环HorizontalScrollView水平滑动
- Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
- 如何设置DIV水平、垂直居中
- swift按钮如何添加弹窗事件进行修改昵称或者密码等内容
- 如何让div水平垂直居中
- css中如何使div居中(垂直水平居中)
- XAF 如何控制自定义按钮的使用权限[转]
- 如何简单实现网页水平自动居中？
- HTML的DIV如何实现水平居中
- 如何控制页面居中
- 如何用图片或按钮控制IE上下滚动条的移动？？？
- 经典CSS坑：如何完美实现垂直水平居中？
- 如何让div水平垂直居中
- css如何让浮动元素水平居中
- CSS如何让一个按钮居中应该怎么做
- Js控制弹窗实现在任意分辨率下居中显示