10

我jQuery Dialog在这个Demo中创建了一个。它工作正常。关闭按钮显示在右侧。但在我的网站上，在本地主机上运行，​​关闭按钮显示在左侧，如下图所示。

jQuery 对话框

我该如何解决这个问题？

关闭按钮样式

<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>
4

3 回答 3

11

您的示例文件和jsFiddle 演示之间的区别在于jsFiddle 包含一个 jQueryUI 主题，该主题将一些 CSS 规则添加到<button>.

通过将任何 jQueryUI 主题添加到您的演示中，它可以解决问题。例如，包括：

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />

添加样式：

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

其中包括position: absolute. 没有position，right: 0我在另一个问题Hide Title bar and Show Close Button in jQuery Dialog中添加的没有效果，这解释了为什么按钮出现在左侧，因为这是它在正常流程中自然出现的位置。

因此，如果您不使用jQueryUI 主题，则需要添加position: absolute关闭按钮的规则，如下所示：

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 0;
}
于 2013-07-18T20:41:11.237 回答
2

一种可能性 - 风格相互冲突。检查 html 和 CSS 文件中的left:（或right:）CSS 属性。我认为班级的风格 -

.ui-dialog .ui-dialog-titlebar-close

是矛盾的。

编辑：

<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>
于 2013-07-17T04:34:05.850 回答
0

这是你需要改变的css :)

http://prntscr.com/1fwgfz

于 2013-07-17T08:35:19.973 回答