Question

但是这个工作就像 enter image description here 它创建但它显示在页面底部我需要向下滚动才能到达它.. 我希望它出现在屏幕上显示的页面上

以下是我的代码

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",

演示

＆＃13;

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

＆＃13;

body{height:800px}

＆＃13;

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

＆＃13;

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

1 个答案: