Show Close Button in Right side of jQuery Dialog

问题

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>

回答1:

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

回答2:

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>

回答3:

this is css that u need change :)

http://prntscr.com/1fwgfz

来源：https://stackoverflow.com/questions/17691104/show-close-button-in-right-side-of-jquery-dialog

标签

jquery

css

jquery-dialog