非突兀的Javascript弹出窗口

如何在javascript中创建一个显示信息的弹出/警报，同时允许用户在HTML表单的输入字段中输入数据。

HTML:

Javascript:

window.onload = function () {
  var popup = document.createElement("div");
  var text = document.createTextNode("blah blah blah");
  popup.appendChild(text);
  popup.style.visibility = "hidden";
  popup.id = "pop";
  document.getElementsByTagName("body")[0].appendChild(popup);
};

window.popup = function () {
  var pop = document.getElementById("pop");
  pop.style.visibility = "visible";
  window.setTimeout(function(){document.getElementById("pop").style.visibility="hidden";},1000);
};

---

你在找什么？1） JavaScript有许多不同的“弹出”和“工具提示”库（2）这篇文章提出了一个任务，而不是一个具体的问题。在#1中查找内容之后，可能会有一个#2的[更好]问题。您可以创建一个具有更高的

z索引的
div
，并将其放置在您想要的任何位置。到目前为止，您尝试了什么？这无法通过任何预定义的函数实现，例如
alert（）
。这可能会再次引发您编写一个（不太难，只是一个带有CSS样式的div），或者使用类似jQuery/JavaScript函数的东西（有很多所谓的lightbox插件可用）。您是否试图允许用户在弹出窗口中输入数据，以供站点本身使用。另外，您是想自己做还是使用这里的库来帮助您。如果使用
addEventListener
而不是指定给处理程序属性，那么
document.body
将更易于阅读
#pop
{
  width: 200px;
  height: 200px;
  border: solid 1px #000;
  margin-top: -30px;
  margin-left: 20px;
  position: fixed;
  background-color: #fff;
}

window.onload = function () {
  var popup = document.createElement("div");
  var text = document.createTextNode("blah blah blah");
  popup.appendChild(text);
  popup.style.visibility = "hidden";
  popup.id = "pop";
  document.getElementsByTagName("body")[0].appendChild(popup);
};

window.popup = function () {
  var pop = document.getElementById("pop");
  pop.style.visibility = "visible";
  window.setTimeout(function(){document.getElementById("pop").style.visibility="hidden";},1000);
};