弹出文本框

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";

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