Question

当用户在页面上时，我即将制作一个弹出的聊天气球我的气球＆＃34;现在看起来不像聊天气球。

应该如下所示： Chat Balloon

我不知道如何使用HTML DOM在气球下制作这个东西。

我是如何使用JS HTML DOM做到的？

我已经知道了：

＆＃13;

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?";

＆＃13;

有人可以向我提供有关如何执行此操作或为我执行此操作的信息吗？我更喜欢编辑我的代码段你也可以给我一些例子。

Answer 1

这是一个像你排行的图像的例子。您可以在此处查看有效的演示：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;
}

https://jsfiddle.net/BradChelly/oL5bc1j4/

使用JS HTML DOM

1 个答案: