I have created a jQuery Dialog as 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.
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>
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>.
By adding any jQueryUI theme to your demo, it corrects the problem. 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. 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.
So if you are not using a jQueryUI theme, then you need to add position: absolute to the close button's rules, like this:
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 0;
}
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 -
.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>
this is css that u need change :)
来源：https://stackoverflow.com/questions/17691104/show-close-button-in-right-side-of-jquery-dialog