jquery - 在 jQuery 对话框的右侧显示关闭按钮

Question

我创建了一个 jQuery Dialog，如 Demo .它工作正常。关闭按钮显示在右侧。但是在我的网站上，在本地主机上运行，​​关闭按钮显示在左侧，如下图所示。

我该如何解决这个问题？

关闭按钮样式

<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

你的example files之间的区别和 jsFiddle demo是 jsFiddle 包含一个 jQueryUI 主题，它正在向 <button> 添加一些 CSS 规则.

通过将任何 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我在另一个问题中添加的 Hide Title bar and Show Close Button in jQuery Dialog没有效果，这就解释了为什么按钮出现在左侧，因为这是它在正常流程中自然出现的位置。

所以如果你没有使用 jQueryUI theme , 然后你需要添加 position: absolute 关闭按钮的规则，如下所示:

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