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;
}