Question

我的网站上有5个网页，我想在右下角的所有网页上显示一个div或iframe ...就像聊天窗口一样。

所以我应该在哪里添加div / iframe，以便所有页面都可以作为顶部窗口访问。

我可以为一个网页执行此操作，但是当我导航到另一个页面时，div正在隐藏。

请建议可能的解决方案。

Answer 1

您好，您可以使用以下html -

<div class="chat-box"><a href="#" class="chat-bubble"></a></div>

<style>
.chat-box {
    white-space: pre;
    position: fixed;
    z-index: 100; 
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: translateZ(0);
}
.chat-bubble {
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    background-size: 22px 22px;
    box-sizing: content-box;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
    outline: none;
    background-position: center;
    background-color: #0071b2;
    -webkit-user-drag: none;
    -webkit-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
    -webkit-transition: -webkit-transform 150ms cubic-bezier(.4, 0, 1, 1);
    transition: transform 150ms cubic-bezier(.4, 0, 1, 1);
}

</style>

以上示例适用于聊天气泡，您可以根据需要修改样式。

您也可以像在Applozic chat plugin中一样在聊天气泡中添加聊天图标。

Answer 2

我可以为一个网页执行此操作，但是当我导航到另一个页面时，div正在隐藏。

在每次刷新页面的第一页中调用显示聊天栏的功能

如何在所有网页上显示Div或Iframe？

2 个答案: