Question

我正在使用标准的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>

Answer 1

当我的jQuery UI脚本和CSS主题是不同版本时，我遇到了这个问题。在我的情况下，我正在升级jQuery UI，并没有考虑是否需要更改样式表。

我的建议是重新整理所有内容并从新鲜开始，或找到您通常在ThemeRoller中使用的主题，并用该样式表替换您的UI CSS。

Answer 2

具体问题是按钮图标.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>

在jquery对话框窗口中偏离中心x

2 个答案: