Highslide - 带有关闭按钮的可拖动标题

Question

[编辑：虽然我确实得到了答案，但是当同一页面中有多个html扩展器时，它不起作用。请参阅我的new question。]

这应该很容易做到！我正在使用htmlExpand。

我想要的Highslide是一个可拖动的标题，如图所示，右边有一个X关闭。令我感到惊讶的是，这不是内置的，而且是高速滑行的，但是它似乎只是“几乎”工作。

在图形中，标题文本的灰色/蓝色背景表示可拖动区域。 （我使用半透明的.png作为.highslide-heading的背景.X图形实际上就在它背后。）

我希望可拖动区域几乎一直向右延伸，只停留在X的几个像素之外，几乎整个标题可以像窗口一样拖动。

如图所示，我的高滑坡宽度为100％而X不可点击，因为它在可拖动空间的“后面”。如果我将.highslide-heading的宽度更改为90％，它可以工作，但灰色区域更短，看起来很奇怪。

当然，我可以尝试百分比，但我在同一页面上有几个弹出项目，并且它们的大小各不相同，因此没有特定的百分比适合所有人。 （P.S.结果因浏览器而异。）

请记住，我希望继续使用htmlExpand而不是其他方法，因此我可以灵活处理弹出的内容。 （我知道这里显示的例子很容易使用其他方法在Highslide中扩展，因为它只是一张图片和一个标题。）

我正在寻找的解决方案：不知何故，我相信我需要关闭按钮才能成为可拖动空间的“顶部”。我相信我需要的CSS属性是z-index，但我不知道在哪里或如何插入它。无论我把它放在哪里，它似乎对.CSS文件都没有影响。

非常感谢帮助。我 DO 给出正确的答案并且支持人们。

Answer 1

这应该让你指向正确的方向。在此演示页面上查看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>',

Answer 2

您可以使用EarlyOut建议的hs.registerOverlay，或者您可以使用预制的wrapperClassName: 'draggable-header'（或hs.wrapperClassName = 'draggable-header';，如果您更喜欢将其用作全局设置），它可以执行所有操作你要求CSS中的一些变化。

我假设您已经在使用wrapperClassName: 'draggable-header'，但是您需要将标题的背景颜色添加到正确的CSS选择器中以实现您想要的效果，并且还需要使用透明的X（关闭）图形文件和几行额外的CSS。
请参阅此jsFiddle：http://jsfiddle.net/roadrash/mXmLN/