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

时间:2013-03-21 20:59:30

标签: highslide

[编辑:虽然我确实得到了答案,但是当同一页面中有多个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 给出正确的答案并且支持人们。

enter image description here

2 个答案:

答案 0 :(得分: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>',

答案 1 :(得分:1)

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

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