我使用的是一个标准的jquery对话框窗口,右上角关闭窗口的X按钮没有居中。我相信以前有人问过这个问题,我今天的谷歌技能还不够…任何帮助都将不胜感激。
没有“居中”的元素是
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
它应该在
<span class="ui-button-text">close</span>
不能让jfiddle去工作。我也有一段时间没睡觉了..。
代码如下:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<!--<script src='spin.js'></script>-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script>
$(function(){
$('#dialog').dialog({
autoOpen: false,
width: 800,
modal: true,
position: {
my: "top",
at: "top"
},
resizable: false,
buttons: {
"Go": function () {
$('#dialog').html('hello');
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$('#subButton').click(function () {
$('#dialog').html("look at x");
$('#dialog').dialog('open');
});
});
</script>
<form name='stuff' method='POST'>
<input type='button' id='subButton' value='Confirm Settings'>
</form>
<div id='dialog'></div>
发布于 2013-12-04 11:46:55
当我的issue脚本和jQuery主题是不同的版本时,我遇到了这个问题。在我的例子中,我正在升级jQuery UI,没有考虑到需要更改样式表。
我的建议是要么重新捆绑所有内容并从头开始,要么找到通常在ThemeRoller中使用的主题,并用该样式表替换您的UI CSS。
发布于 2016-08-04 21:34:57
具体的问题是按钮图标的位置。.ui icon -closethick我使用了以下css和js:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
该问题仍然存在,对话框上的x按钮图标未对齐,并且页面上未引用任何其他css。我最终创建了一个覆盖来纠正按钮图标对齐问题。
<style>
.ui-dialog-titlebar-close .ui-icon-closethick {
position: relative !important;
margin-top: -1px !important;
margin-left: -8px !important;
}
</style>
https://stackoverflow.com/questions/18622692
复制相似问题