在jQuery对话框中显示关闭按钮的右侧

Question

在jQuery对话框中显示关闭按钮的右侧

jquerycssjquery-dialog

10

我已经按照演示创建了一个 jQuery对话框。它能正常工作，但是关闭按钮在演示中位于右侧，在我的本地站点上却在左侧，如下图所示：

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>

- Bishan

在你的电脑上？还是在你的网站上？ - NETCreator Hosting - WebDesign

1

问题可能来自于你的CSS... - NETCreator Hosting - WebDesign

1

是的，abs函数的确存在风格冲突的情况。 - Patt Mehta

1

你能否在Chrome中_Right click_ -> _Inspect_关闭按钮，然后找到该按钮的<a>父元素。您能否在Chrome控制台中复制_Computed Style_并将输出粘贴到问题中？该元素应类似于

<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a>

。 - andyb

1

@andyb 更新了帖子的样式。没有 <a> 标签，只有一个 button 标签。 - Bishan

显示剩余6条评论

3个回答

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>

- Patt Mehta

1

.ui-dialog .ui-dialog-titlebar-close { left:0; } 不起作用。 - Bishan

result-light.css是什么？ - Bishan

我将你的代码复制到一个 html 页面中，并注释了 result-light.css 样式表的行，然后运行。但是关闭按钮仍然在左侧。 - Bishan

0

这是你需要修改的CSS代码 :)

http://prntscr.com/1fwgfz

- Žarko Selak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyb · Accepted Answer

你的示例文件和jsFiddle演示之间的区别在于，jsFiddle包含了jQueryUI主题，在<button>中添加了一些CSS规则。

通过将任何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主题，则需要将position: absolute添加到关闭按钮的规则中，如下所示：

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