Question

我有一些吐司通知。我给了他们一个“绝对”的位置，希望他们把自己置于自己的位置。

新的吐司应该将自己置于已经存在的之上。旧的那个会向下移动。

所以这是我重要的Div：

CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) { var wrapperDiv = document.createElement("div"); var width = 350; wrapperDiv.id = "toast_" + this.toastCounter; wrapperDiv.style.position = "absolute"; wrapperDiv.style.left = "50%"; wrapperDiv.style.display = "none"; wrapperDiv.style.width = width + "px"; wrapperDiv.style.height = "100px"; wrapperDiv.style.border = "2px solid " + borderColor; wrapperDiv.style.borderRadius = "10px"; wrapperDiv.onclick = function() { wrapperDiv.remove(); // Destroy the toast by clicking on it } document.body.appendChild(wrapperDiv); }

在创建它之后，我将此代码用于某些动画并将其销毁：

var thisToast = this.toastCounter - 1; // get the toast Id $(document).find("#toast_" + thisToast) .fadeIn(750) .delay(3000) .fadeOut(750, function() { $(this).remove(); // Destroy the toast });

这是我正在寻找的图片

Answer 1

查看此JSBIN。

您可以使用Bootstrap的网格系统来简化操作。您永远不应该使用绝对布局，它使响应式网页无法实现 - 请查看调整浏览器大小时会发生什么。

您需要查看Element API。

var container = document.querySelector('div.container');
var newDiv = document.createElement('div');

newDiv.innerHTML = "HELLO  WORLD";
container.prepend(newDiv);

随附的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script>

  <div class="container">
    hey
  </div>

  </body>
</html>

您要查找的方法是prepend()

在

1 个答案: