Jam*_*mes 11 html javascript css iframe
我希望能够在任何网页内放置一个"立即聊天"按钮,弹出一个聊天窗口.
我可以使用JavaScript添加"立即聊天"按钮,但这会在页面中继承css并使其看起来很糟糕.所以我想将它放在自己的页面中,并使用iframe将其嵌入到任何网页中.
这是我能得到的尽可能接近.它会在页面顶部显示iframe,但不允许点击通过.如何点击"Click Me"按钮？
我看到大多数实时聊天都这样做,所以一定有可能.
<html>
<head></head>
<body>
<div><button>Click Me</button></div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"></iframe>
</body>
</html>
希望有可能不必完全确定iframe的大小,但也许......它不是吗？奇怪的是,iframe可以显示它背后的网页,但不能允许它被点击.
z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定)
所以一定要给你的按钮div容器一个位置
来自:https://developer.mozilla.org/en/docs/Web/CSS/z-index
z-index属性指定定位元素及其后代的z顺序.当元素重叠时,z顺序决定哪一个覆盖另一个.具有较大z指数的元素通常覆盖具有较低z元素的元素.
对于定位框(即,具有静态以外的任何位置的框),z-index属性指定:
当前堆叠上下文中框的堆栈级别.框是否建立本地堆叠上下文.
来自http://www.w3schools.com/cssref/pr_pos_z-index.asp
定义和用法z-index属性指定元素的堆栈顺序.
堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面.
注意:z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定).