Html 弹出文本框

我想知道弹出并覆盖在网页顶部的框叫什么

例如： Facebook照片-它使背景网页变灰，并打开一个单独的弹出窗口以查看图片

广告-你（经常）必须点击“x”才能跳出的框

基本上是在同一页面，但它显示在中间，在你的主要网页顶部，用于关键信息或不。p>

---

我想创建一个来解释网页应该是关于什么的，某种程度上是一个方向，或者当一个人要求它时；例如，通过单击“了解更多信息”。

以下是一种简单的叠加弹出方式。请注意，使用jQuery或jQuery的UI库这样的库可能更容易做到这一点，这使得创建对话框变得非常容易。还有其他库，如lightbox等，但下面的库使用的是纯javascript

还要注意，我在CSS代码中有注释，所以您知道每个部分在做什么

//使用onload事件，以便确保DOM处于
//在尝试获取元素之前加载最少的元素
window.onload=函数（）{
//获取表示元素的DOM元素。
//并设置onclick事件
document.getElementById（“LearnMoreBtn”）.onclick=function（）{
//设置一个变量，以包含文档的DOM元素
var overlay=document.getElementById（“overlay”）；
//设置一个变量以包含弹出窗口的DOM元素
var popup=document.getElementById（“popup”）；
//将显示css样式从无更改为块将使其可见
overlay.style.display=“块”；
//弹出窗口也是如此
popup.style.display=“block”；
};
};
#覆盖{
显示：无；/*这将使其最初隐藏*/
position:fixed；/*这使得它显示在一个固定的位置，即使它们滚动*/
左：0px；/*这将元素定位到最左边的位置*/
top:0px；/*这会将elment定位到最顶端的位置*/
宽度：100%；/*这使得元素占据父元素宽度的100%*/
高度：100%；/*这使得元素占据父元素高度的100%*/
背景：#000；/*给它一个黑色背景*/
不透明度：0.5；/*将不透明度更改为50%，以便透明*/
z-index:99999；/*更改z-index，使其高于其他所有内容*/
}
#弹出窗口{
显示：无；
位置：固定；
左：50%；/*左上角在此处放置左上角页面*/
顶部：元素的50%；/*到*/
宽度：300px；/*将弹出窗口设置为具有特定的宽度/高度*/
高度：150像素；
页边距顶部：-75px；/*要使弹出窗口正确居中，我们需要*/
左边距：-150px；/*将上/左边距移动一半宽度/高度*/
背景：#FFFFFF；/*白色背景*/
边框：2倍实心#000；/*并给它一个边框*/
z-index:100000；/*将z-index设置为比覆盖多1，以便弹出窗口位于覆盖上方*/
}
了解更多信息
此处弹出内容
您要查找的一般功能称为模式对话框

这里是jqueryui控件的演示：
一个更简单的方法是使用
title
属性，它可用于任何元素，并且几乎在每个浏览器中都会为您显示工具提示。这里还有一些例子：

您可以使用正确的样式使几乎任何元素都可以这样做，但通常使用div，使用css样式更改其位置、z索引、不透明度等，这意味着我为[learn more]创建onclick事件文本调用一个调用css的函数，使主体变黑，并在正确的位置显示div？我听说它们被称为“lightbox”