箭头在底部的jQuery对话框 [英] Arrow in Bottom of jQuery Dialog

问题描述

我使用）顶部，一个白色和一个灰色，以创建三角形轮廓。还需要允许形状在 .ui-dialog 中可见外部，因此我添加了 overflow：visible; 到该选择器 - 查看演示 。

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

I'm using jQuery Dialog and i need to show an arrow tip on bottom center of jQuery Dialog like below.

How can i do this ?

解决方案

One idea is to use the ::after and ::before pseudo-elements to place 2 CSS triangles (see How does this CSS triangle shape work?) over the top of each other, one white and one grey in order to create a triangle outline. Also need to allow the shapes to be visible "outside" of the .ui-dialog so I added overflow:visible; to that selector - 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;
}

Note: This is similar to how it is done in Google Calendar, but instead Google use 2 x <div>

这篇关于箭头在底部的jQuery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！