当用户在页面上时,我即将制作一个弹出的聊天气球 我的气球"现在看起来不像聊天气球。
应该如下所示: Chat Balloon
我不知道如何使用HTML DOM在气球下制作这个东西。
我是如何使用JS HTML DOM做到的?
我已经知道了:
this.div = document.createElement('div');
// set style of div
this.div.style.width = '120px';
this.div.style.height = '46px';
this.div.style.bottom = '30%';
this.div.style.zIndex = '9999999';
this.div.style.display = 'block';
this.div.style.position = 'fixed';
this.div.style.bottom = '12%';
this.div.style.paddingTop = '8px';
this.div.style.color = 'black';
this.div.style.right = '1%';
this.div.style.backgroundColor = 'rgba(211, 211, 211, 1)';
this.div.style.borderWidth = '1px';
this.div.style.borderStyle = 'solid';
this.div.style.textAlign = 'center';
this.div.style.borderRadius = "6px";
this.div.style.borderColor = 'lightgray';
this.div.setAttribute("id", "help");
document.body.appendChild(this.div);
document.getElementById("help").innerHTML = "Kan ik u helpen?";

有人可以向我提供有关如何执行此操作或为我执行此操作的信息吗?
我更喜欢编辑我的代码段
你也可以给我一些例子。
答案 0 :(得分:0)
这是一个像你排行的图像的例子。您可以在此处查看有效的演示:https://jsfiddle.net/BradChelly/oL5bc1j4/
HTML:
<div class="bubble">CSS Speech Bubble</div>
CSS:
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 5px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 26px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -26px;
left: 35px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 30px 19px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
bottom: -35px;
left: 31px;
}