在 jQuery 对话框的右侧显示关闭按钮答案

【问题标题】：Show Close Button in Right side of jQuery Dialog在 jQuery 对话框的右侧显示关闭按钮
【发布时间】：2013-07-17 04:24:44
【问题描述】：

我创建了一个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>

【问题讨论】：

在您的电脑中？还是在您的网站上？
问题可能出在你的css...
是的，.. abs.. 这是风格冲突的情况..
你能否右键单击 -> 检查关闭按钮，然后在Chrome中找到该按钮的<a>父元素。您能否复制 Chrome 控制台中的 Computed Style 并将输出粘贴到问题中？该元素应类似于<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a>。
@andyb 更新了帖子的风格。没有<a> 标签。有一个button 标签。

标签： jquery css jquery-dialog

【解决方案1】：

example files 和 jsFiddle demo 之间的区别在于 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，我在另一个问题Hide Title bar and Show Close Button in jQuery Dialog 中添加的right: 0 无效，这就解释了为什么按钮出现在左侧，因为它自然会出现在正常流程中.

因此，如果您不使用jQueryUI theme，则需要将position: absolute 添加到关闭按钮的 规则中，如下所示：

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

【讨论】：

你能检查我关于get values from GridView in jQuery Dialog in C#的新问题吗？现在我遇到了这个问题。
我已经很久没有在C# 编码了，但如果可以的话，我会看看你的问题并提供帮助。

【解决方案2】：

一种可能性—— 风格很矛盾。检查 html 和 CSS 文件中的 left:（或 right:）CSS 属性。我认为班级的风格 -

.ui-dialog .ui-dialog-titlebar-close

有冲突。

编辑：

<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>      
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
    overflow:visible;
}
.ui-dialog .ui-dialog-titlebar {
    background:transparent;
    border:none;
}
.ui-dialog .ui-dialog-title {
    display:none;
}
.ui-dialog .ui-dialog-titlebar-close {
    left:0;
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane { border-width: 0 !important; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 150px;
    border-style: solid;
    border-width: 10px;
}
.ui-resizable-handle.ui-resizable-s::before {
    border-color: #aaa transparent transparent transparent;
    top: 2px;
}
.ui-resizable-handle.ui-resizable-s::after {
    border-color: #fff transparent transparent transparent;
    top: 1px;
}
</style>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#open').click(function() {
    $('#dialog').dialog('open');
});
$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        resizable: true,
        width: 300,
        height: 'auto',
        buttons: {
            "Save": function () {

            }
        }
    });
}); 
});//]]>  
</script>
</head>

【讨论】：

.ui-dialog .ui-dialog-titlebar-close { left:0; } 不工作。
result-light.css 是什么？
我将您的代码复制到html 页面和result-light.css 样式表的注释行并运行。但关闭按钮仍然在左侧。

【解决方案3】：

这是你需要更改的 css :)

http://prntscr.com/1fwgfz

【讨论】：