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

Question

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

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

示例 - https://www.livechatinc.com/

我可以为一个网页执行此操作,但是当我导航到另一个页面时,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聊天插件中一样在聊天气泡中添加聊天图标.