3

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

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

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

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

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

4

3 回答 3

10

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

另请注意，我在 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>

要再次隐藏叠加层和弹出窗口，只需将.style.display背面设置为none

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

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

于 2013-10-08T01:57:02.807 回答
1

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

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

于 2013-10-08T02:07:03.343 回答
0

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

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

于 2015-05-26T13:11:26.353 回答