在jQuery Dialog的右侧显示关闭按钮

时间：2013-07-17 04:24:44

标签： jquery css jquery-dialog

我已在此Demo中创建了jQuery Dialog。它运作正常。关闭按钮显示在右侧。但是在我的网站上，在localhost上运行，关闭按钮显示在左侧，如下图所示。

jQuery Dialog

我该如何解决这个问题？

关闭按钮样式 

<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 个答案:

答案 0 :(得分：10)

您的example files和jsFiddle demo之间的区别在于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，我在其他问题Hide Title bar and Show Close Button in jQuery Dialog中添加的right: 0无效，这就解释了为什么按钮出现在左侧，因为这是自然出现在正常流量。

因此，如果您没有使用jQueryUI theme，则需要将position: absolute添加到关闭按钮的规则中，如下所示：

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 0;
}

答案 1 :(得分：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>

答案 2 :(得分：0)

这是你需要改变的css :)

http://prntscr.com/1fwgfz

相关问题
最新问题