在jQuery Dialog的右侧显示关闭按钮

Question

我jQuery Dialog在这个Demo中创建了一个.它运作正常.关闭按钮显示在右侧.但在我的网站上,在localhost上运行,关闭按钮显示在左侧,如下图所示.

我怎么解决这个问题？

关闭按钮样式

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>

Answer 1

你的示例文件和jsFiddle演示之间的区别在于jsFiddle包含一个jQueryUI主题,它将一些CSS规则添加到<button>.

通过向您的演示添加任何jQueryUI主题,它可以解决问题.例如,包括:

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />

添加风格:

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

其中包括position: absolute.没有position,right: 0我在另一个问题中添加的隐藏标题栏和jQuery对话框中的显示关闭按钮没有效果,这解释了为什么按钮出现在左侧,因为这是自然出现在正常流程中的位置.

因此,如果您没有使用jQueryUI主题,那么您需要添加position: absolute到关闭按钮的规则,如下所示:

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 0;
}