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

Question

i want this enter image description here

but this working like enter image description here It create but it is appear bottom on page I need to scroll down to reach it.. I want that it appear on the page that is display on the screen

following is my code

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

use position:fixed

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

Demo

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>

</div>