Highslide - 可關閉按鈕的可拖拽標頭

[編輯：雖然我確實得到了一個答案，但當同一頁面有多個html擴展程序時，它不起作用。請看我的new question。]Highslide - 可關閉按鈕的可拖拽標頭

這應該很容易做到！我正在使用htmlExpand。

我想從Highslide中得到的所有內容都是一個可拖動的標題，如下所示，其中X爲關閉權。我很驚訝這不是內置的並且準備好在高速滑行中，但是它似乎只是「幾乎」工作。

在圖形中，標題文本的灰色/藍色背景表示可拖動區域。（我使用半透明巴紐作爲.highslide航向的背景; X圖形實際上是它背後。）

我想拖動區域幾乎一直延伸到右邊，停只是一個幾乎沒有像素的像素，幾乎整個頭像可以像窗口一樣拖動。

如上所示，我有100％的highslide標題寬度，X不可點擊，因爲它位於可拖動空間的「後面」。如果我將.highslide的寬度改爲90％，它可以工作，但灰色區域更短，看起來很奇怪。

當然，我可以嘗試百分比，但是我在同一頁面上有幾個彈出項目，並且它們的大小各不相同，因此沒有特定的百分比適合所有人。（結果因瀏覽器而異）

請注意，我希望繼續使用htmlExpand而不是其他方法，所以我可以靈活處理彈出的內容。（我知道這裏顯示的例子可以很容易地使用其他方法來在Highslide中進行擴展，因爲它只是一張圖片和一個標題。）

我想要的解決方案：不知何故，我相信我需要關閉按鈕才能「在可拖動空間的頂部「。我相信我需要的CSS屬性是z-index，但我不知道在哪裏或如何插入它。無論我放在哪裏，它似乎都不會影響.CSS文件。

幫助將不勝感激。我DO給檢查正確的答案和upvote的人。

enter image description here

來源

2013-03-21 PaulOTron2000

您可以使用EarlyOut建議hs.registerOverlay，或者您可以使用預製wrapperClassName: 'draggable-header'（或hs.wrapperClassName = 'draggable-header';如果你喜歡使用它作爲一個全球性的設置），它可以做你一些變化想得到的都在CSS中。

我假設您已經在使用wrapperClassName: 'draggable-header'，但您需要將標題的背景顏色添加到正確的CSS選擇器以實現您想要的效果，並且還需要使用透明的X（關閉）圖形文件和幾行額外的CSS。
請看這個jsFiddle：http://jsfiddle.net/roadrash/mXmLN/

來源

2013-03-22 08:37:34 RoadRash

嗨RoadRash。如果你是我認爲你是誰，收到你的消息很好。 – PaulOTron2000 2013-03-22 14:35:23

我去了那個JsFiddle，被吹走了，因爲它看起來完全像我在做的事情，除了你的作品和我的作品。所以，顯然答案在於比較你提供的與我所做的事情。還沒有找到它，但我會，顯然它會工作，所以你得到令人垂涎的綠色複選標記。 – PaulOTron2000 2013-03-22 14:43:07

這應該讓你指出正確的方向。看看RoadRash的編碼這個演示頁面：

http://www.roadrash.no/hs-support/iframe-closebutton-redirect.html

但既然你想要一個普通的「親密」的X，而不是重定向，在覆蓋的「HTML」屬性更改爲標準：

html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',

來源

2013-03-21 21:57:52 MisterNeutron

Highslide - 可關閉按鈕的可拖拽標頭

回答

相關問題