0

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

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

我想要的 Highslide 只是一个可拖动的标题，如此处所示，右侧有一个 X 以关闭。我很惊讶这不是内置的并且可以在 highslide 中使用，但可惜它似乎只是“几乎”工作。

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

我希望可拖动区域几乎一直向右延伸，在距离 X 仅几个像素处停止，使几乎整个标题可以像窗口一样拖动。

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

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

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

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

帮助将不胜感激。我确实给出了正确的答案并为人们投票。

在此处输入图像描述

4

2 回答 2

1

您可以使用hs.registerOverlayEarlyOut 建议的，也可以使用预制的wrapperClassName: 'draggable-header'（或者hs.wrapperClassName = 'draggable-header';如果您更喜欢将其用作全局设置），只需对 CSS 进行一些更改即可完成您要求的一切。

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

于 2013-03-22T08:37:34.490 回答
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>',
于 2013-03-21T21:57:52.493 回答