当我使用jQuery动态单击按钮时如何在页面的特定位置上创建聊天框

Question

我想在这里输入图像描述

但这就像在这里输入图像描述那样工作，但它出现在页面的底部，我需要向下滚动才能到达它。.我希望它出现在屏幕上显示的页面上

以下是我的代码

var div = $("<div>", {
  // "text":"I'm a new paragraph!",
  "class": "bat",
  "css": {
    "background": "#f7f7f7",
    "height": "350",
    "border": "10px solid #33A919",
    "width": "250px",
    "float": "right",
    "position": "relative",
    "top": "20vh",
    "border-top-left-radius": "10px",
    "border-top-right-radius": "10px"
  }
});
$("body").append(div);

$("<div>", {
  "class": "foo",
  "text": "Heading my name is khan",
  "css": {
    "color": "white",
    "background": "#33A919",
    "height": "30px",
    "line-height": "30px"
  }

}).appendTo(".bat");

$(".foo").after("<div class='msg' style='background: hotpink;height:250px;width: 250px;overflow-y: auto;'></div>");
$(".msg").after("<textarea placeholder='Type your message here!' style='background: white; height: 65px; width: 250px; margin-top: 4px;'></textarea>");

}

Answer 1

使用position:fixed

"position": "fixed",
"bottom": "0",
"right": "0",

演示

 var div = $("<div>", { // "text":"I'm a new paragraph!", "class": "bat", "css": { "background": "#f7f7f7", "height": "350", "border": "10px solid #33A919", "width": "250px", "float": "right", "position": "fixed", "bottom": "0", "right": "0", "border-top-left-radius": "10px", "border-top-right-radius": "10px" } }); $("body").append(div); $("<div>", { "class": "foo", "text": "Heading my name is khan", "css": { "color": "white", "background": "#33A919", "height": "30px", "line-height": "30px" } }).appendTo(".bat"); $(".foo").after("<div class='msg' style='background: hotpink;height:250px;width: 250px;overflow-y: auto;'></div>"); $(".msg").after("<textarea placeholder='Type your message here!' style='background: white; height: 65px; width: 250px; margin-top: 4px;'></textarea>"); 

 body{height:800px} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>