Question

我想知道如何在网页上弹出并叠加的方框。

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

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

基本上它位于同一页面上，但它显示在主页面的中间，是否显示重要信息。

我想创建一个来解释网页应该是什么，一种方向，或一个人提出要求;例如，点击“了解更多”。

Answer 1

以下是执行叠加弹出窗口的简单方法。请注意，对于像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";

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

Answer 2

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

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

Answer 3

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

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

弹出文本框

3 个答案: