jQuery對話框底部的箭頭

我使用的是jQuery Dialog，我需要在下面的底部中心jQuery Dialog上顯示箭頭提示。jQuery對話框底部的箭頭

gcal

我怎樣才能做到這一點？

2013-07-16 Bishan

一種想法是爲了創造一個三角形輪廓使用::after和::before僞元素放置2個CSS三角形（參見How do CSS triangles work?）在彼此之上，一個白一灰色的頂部。還需要允許形狀在.ui-dialog的「外部」可見，所以我將overflow:visible;添加到該選擇器 - 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; 
}

注：這類似於它是如何在谷歌日曆做，而是谷歌使用2×<div>

來源

2013-07-16 10:22:01 andyb

哇。優秀:) – Bishan

你知道如何[在jQuery對話框中隱藏標題欄和顯示關閉按鈕]（http://stackoverflow.com/questions/17672445/hide-title-bar-and-show-close-button-in- jquery-dialog）？ – Bishan

我會看看我是否也可以幫忙:-) – andyb

你可以使用CSS3創建一個45度旋轉的平方或一個旋轉了方形的int png圖像。

在這兩種情況下，你會把它放在絕對位置，以將其貼在底部。

對於CSS3選項，使用bottom: -Npx;其中N是（側* SQRT（2）/ 2）和同爲left:

對於圖像選項，使用寬度/高度的而不是計算的一半。

來源

2013-07-16 09:43:46 Virus721

您可以複製其中之一，並將它們用作代碼中的文本，然後將其放置在中心。：ʌ，ᴧ，↑，▲

（確保你的編輯器的編碼是UTF-8）

如果你需要更多的字符，你可以找到他們在字符映射表，如果你是使用窗口。

來源

2013-07-16 09:52:16 TheScarecrow

jQuery對話框底部的箭頭

回答

相關問題