在jQuery Dialog的右侧显示关闭按钮
[英]Show Close Button in Right side of jQuery Dialog
问题描述
I have created a jQuery Dialog as in this Demo . 
我在这个Demo中创建了一个jQuery Dialog 。 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. 但在我的网站上，在localhost上运行，关闭按钮显示在左侧，如下图所示。
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>
3 个解决方案
解决方案1
10 已采纳 2013-07-18 20:41:11
The difference between your example files and the jsFiddle demo is 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. 通过向您的演示添加任何jQueryUI主题，它可以解决问题。 For example, including: 例如，包括：
<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 . 其中包括position: absolute 。 Without position , the right: 0 that I added in the other question Hide Title bar and Show Close Button in jQuery Dialog has no effect, which explains why the button appears on the left, since that is where it would naturally appear in normal flow . 没有position ， right: 0我在另一个问题中添加的right: 0 隐藏标题栏和jQuery对话框中的显示关闭按钮没有效果，这解释了为什么按钮出现在左侧，因为这是自然出现在正常流程中的位置 。
So if you are not using a jQueryUI theme , then you need to add position: absolute to the close button's rules, like this: 因此，如果您没有使用jQueryUI主题 ，那么您需要将position: absolute添加到关闭按钮的规则中，如下所示：
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 0;
}
解决方案2
2 2013-07-17 04:34:05
One possibility - The styles are conflicting. 一种可能性 - 风格是相互矛盾的。 Check for the left: (or right: ) CSS attributes in your html and CSS files. 检查html和CSS文件中的left:或right: :) CSS属性。 I think the styles for the class - 我觉得这个班的风格 -
.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>
解决方案3
0 2013-07-17 08:35:19
this is css that u need change :) 这是你需要改变的css :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.