Html 弹出文本框

Pop up text box

提问by user2712882

I'd like to know how is called the box that pops up and overlays on top of a webpage.

我想知道弹出并覆盖在网页顶部的框如何称为。

Examples are: Facebook photos - It grays the background webpage and opens a separate pop up to view pictures.

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

Advertisements - The box that you (often) have to click the 'x' to get out.

广告 - 您（通常）必须单击“x”才能退出的框。

Basically it is on the same page but it shows up in the middle, on top of your main webpage for critical information or not.

基本上它在同一页面上，但它显示在中间，在您的主网页顶部，以获取关键信息。

I'd like to create one to explain what the webpage is supposed to be about, sort of an orientation, or when a person requests it; for example, by clicking "learn more".

我想创建一个来解释网页应该是关于什么的，某种方向，或者当一个人请求它时；例如，点击“了解更多”。

回答by Patrick Evans

The following is a simple way of doing a overlay popup. Note that some of this might be easier to do with a library like jQuery or jQuery's UI library which makes it real easy to make a dialog box. There are other libraries like lightbox etc. But the below is using pure javascript.

以下是进行叠加弹出窗口的简单方法。请注意，使用像 jQuery 或 jQuery 的 UI 库这样的库可能更容易做到其中一些，这使得创建对话框变得非常容易。还有其他库，如灯箱等。但下面使用的是纯 javascript。

Also note that i have comments in the CSS code, so you know what each part is doing.

另请注意，我在 CSS 代码中有注释，因此您知道每个部分在做什么。

//Use the onload event so that we can make sure the DOM is at 
//least mostly loaded before trying to get elements
window.onload = function() {
   //Get the DOM element that represents the <button> element.
   //And set the onclick event
   document.getElementById("LearnMoreBtn").onclick = function(){
      //Set a variable to contain the DOM element of the overly
      var overlay = document.getElementById("overlay");
      //Set a variable to contain the DOM element of the popup
      var popup = document.getElementById("popup");
      
      //Changing the display css style from none to block will make it visible
      overlay.style.display = "block";
      //Same goes for the popup
      popup.style.display = "block";
   };
};

#overlay {
   display:none;    /* This make it initially hidden                                           */
   position:fixed;  /* This makes it so it says in a fixed position even if they scroll around */
   left:0px;        /* This positions the element to the left most position                    */
   top:0px;         /* This positions the elment to the top most position                      */
   width:100%;      /* This makes the element take up 100% of the parents width                */
   height:100%;     /* This makes the element take up 100% of the parents height               */
   background:#000; /* Give it a black background                                              */
   opacity:0.5;     /* Change the opacity to 50% so that is see through.                       */
   z-index:99999;   /* Change the z-index so it will be above everything else                  */
}

#popup {
   display:none;
   position:fixed;
   left:50%;              /* left and top here position top left page                                        */
   top:50%;               /* of the element to the center of the                                             */
   width:300px;           /* Set the popup to have a specific width/height                                   */
   height:150px;
   margin-top:-75px;      /* To get the popup to center correctly we need                                    */
   margin-left:-150px;    /* To displace the the top/left margins by half of the width/height                */
   background:#FFFFFF;    /* Background of white                                                             */
   border:2px solid #000; /* And give it a border                                                            */
   z-index:100000;        /* Set z-index to 1 more than that of the overlay so the popup is over the overlay */
}

<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
  Popup contents here
</div>

To hide the overlay and the popup again just set the .style.displayback to none

要再次隐藏覆盖层和弹出窗口，只需将.style.display返回设置为none

overlay.style.display = "none";
popup.style.display = "none";

Note that using this particular code will make the overlay and popup abruptly appear, no fading or sliding. As I mentioned earlier it would be easier to do these kind of things with the libraries mentioned among others.

请注意，使用此特定代码将使叠加层和弹出窗口突然出现，不会褪色或滑动。正如我之前提到的，使用其中提到的库来做这些事情会更容易。

回答by Snowburnt

The general functionality of what you're looking for is called a modal dialog.

您正在寻找的一般功能称为模态对话框。

Here's a demo for the jqueryui control: http://jqueryui.com/dialog/#modal-message

这是 jqueryui 控件的演示：http: //jqueryui.com/dialog/#modal-message

回答by Mahdi J.Ansari

An easier way is to use the titleattribute, it is available for any element and almost in every browser it shows a tooltip for you. Here there are some more examples:

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

http://www.w3schools.com/tags/att_global_title.asp

http://www.w3schools.com/tags/att_global_title.asp