在 jQuery 对话框的右侧显示关闭按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17691104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Close Button in Right side of jQuery Dialog
提问by Bishan
I have created a jQuery Dialogas in this Demo. It is working properly. close button is display in right side in there. but on my site, running on localhost, close button is display in left side as in below image.
我jQuery Dialog在这个Demo 中创建了一个。它工作正常。关闭按钮显示在右侧。但在我的网站上，在本地主机上运行，关闭按钮显示在左侧，如下图所示。
How can i solve this ?
我该如何解决这个问题？
Close Button Style
关闭按钮样式
<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>
采纳答案by andyb
The difference between your example filesand the jsFiddle demois the the jsFiddle includes a jQueryUI theme which is adding some CSS rules to the <button>.
您的示例文件和jsFiddle 演示之间的区别在于jsFiddle 包含一个 jQueryUI 主题，该主题将一些 CSS 规则添加到<button>.
By adding any jQueryUI theme to your demo, it corrects the problem. For example, including:
通过将任何 jQueryUI 主题添加到您的演示中，它可以解决问题。例如，包括：
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />
adds the style:
添加样式：
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
which includes position: absolute. Without position, the right: 0that I added in the other question Hide Title bar and Show Close Button in jQuery Dialoghas no effect, which explains why the button appears on the left, since that is where it would naturally appear in normal flow.
其中包括position: absolute. 没有position，right: 0我在另一个问题Hide Title bar and Show Close Button in jQuery Dialog中添加的 没有效果，这解释了为什么按钮出现在左侧，因为那是它在正常流程中自然出现的地方。
So if you are not using a jQueryUI theme, then you need to add position: absoluteto the close button'srules, like this:
因此，如果您没有使用jQueryUI 主题，那么您需要添加position: absolute到关闭按钮的规则中，如下所示：
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 0;
}
回答by GLES
One possibility -
The styles are conflicting. Check for the left:(or right:) CSS attributes in your html and CSS files. I think the styles for the class -
一种可能性 - 样式相互冲突。检查html 和 CSS 文件中的left:（或right:）CSS 属性。我认为班级的风格 -
.ui-dialog .ui-dialog-titlebar-close
.ui-dialog .ui-dialog-titlebar-close
are conflicting.
是矛盾的。
Edit:
编辑：
<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>
回答by ?arko Selak
this is css that u need change :)
这是你需要改变的 css :)
