jQuery对话底部的箭头

我正在使用jQuery Dialog,我需要在jQuery Dialog的底部中心显示一个箭头提示,如下所示.

我怎样才能做到这一点？

最佳答案

一个想法是使用:: after和:: before伪元素将2个CSS三角形(见How do CSS triangles work?)放在彼此的顶部,一个白色和一个灰色以创建三角形轮廓.还需要允许形状在.ui-对话框的“外部”可见,所以我添加了溢出：可见;到那个选择器 – see demo.

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

.ui-dialog {
    overflow:visible;
}

注意：这类似于在Google日历中完成的方式,但Google使用2 x< div>

jQuery对话底部的箭头

相关文章