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