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

如何控制jquery ui弹窗下方按钮水平居中的更多相关文章

  1. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  2. 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了

    在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...

  3. [前端]使用JQuery UI Layout Plug-in布局 - wolfy

    引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...

  4. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  6. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  7. [转载]jQuery UI 使用

    最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1     jQuery UI 2     为我所用 2.1     Tabs 2. ...

  8. jQuery Tools：Web开发必备的 jQuery UI 库

    基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...

  9. jQuery UI框架

    jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...

随机推荐

  1. python ros 回充调用demo

    #!/usr/bin/env python #coding=utf- import rospy from std_msgs.msg import String def talker(): pub = ...

  2. java反射究竟消耗多少效率

    原文出处 一直以来都对Java反射究竟消耗了多少效率很感兴趣,今晚总算有空进行了一下测试 测试被调用的类和方法 package com.spring.scran; public class TestM ...

  3. EFS 你应该知道的事

    需要备份或者还保留这个路径 %USERPROFILE%\AppData\Roaming\Microsoft\Crypto\RSA certmgr.msc 个人证书导出你开始使用EFS加密后的证书 ci ...

  4. PC端，移动端分离，如何结合？？

    <script type="text/javascript"> function mobile_device_detect(url) { var thisOS = na ...

  5. The Number Games CodeForces - 980E (树, 贪心)

    链接 大意: 给定$n$节点树, 求删除$k$个节点, 使得删除后还为树, 且剩余点$\sum{2^i}$尽量大 维护一个集合$S$, 每次尽量添加最大的点即可 这样的话需要支持求点到集合的最短距离, ...

  6. 『TensorFlow』项目资源分享

    TF中文社区 TF_GOOGLE官方代码学习 1.TensorFlow-Slim TF-Slim 是 tensorflow 较新版本的扩充包,可以简化繁杂的网络定义,其中也提供了一些demo: Ale ...

  7. 『cs231n』卷积神经网络工程实践技巧_上

    概述 数据增强 思路:在训练的时候引入干扰,在测试的时候避免干扰. 翻转图片增强数据. 随机裁切图片后调整大小用于训练,测试时先图像金字塔制作不同尺寸,然后对每个尺寸在固定位置裁切固定大小进入训练,最 ...

  8. python-day33--Process类中的方法及属性

    p.daemon = True -->守护进程,守护进程不可以再有子进程,并且主进程死守护进程就死,要写在p.start()之前 p.join() ---> 主进程等子进程执行完 之后再结 ...

  9. linux单用户模式

    linux单用户模式 2014年11月11日 17:18 在grub上相应要启动的内核上按“e”. 进入下一界面,继续按“e”. 在进入文本界面后,输入“single”回车. 进入grub界面后,按“ ...

  10. Razor视图引擎 语法学习

    下面就和大家分享下我在asp.net官网看到的资料,学习到的点语法.1.通过使用@符号,可以直接在html页面中写C#或者VB代码:运行后: 2.页面中的C#或者VB代码都放在大括号中.运行后: 3. ...