Question

嗨，我只是在谷歌上找到代码，我不知道如何在加载或网页刷新时触发弹出框

HTML

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

CSS

#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;       is over the overlay
}

JAVASCRIPT

window.onload = function() {

   **document.getElementById("LearnMoreBtn").onclick = function(){**
      var overlay = document.getElementById("overlay");

      var popup = document.getElementById("popup");


      overlay.style.display = "block";

      popup.style.display = "block";
   };
};

提前谢谢=）继承人演示： http://jsfiddle.net/j4c7U/

Answer 1

为什么不从display:none;和#overlay删除#popup，这会在加载或刷新页面时将弹出窗口显示为默认值。

更新了JSfiddle。

Answer 2

检查一下 -

window.onload = function() {
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "block";
    popup.style.display = "block";

document.getElementById("CloseBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "none";
    popup.style.display = "none";      
  }
 };

您只需将pop代码放在窗口加载函数中，而不是从onclick函数调用它。

http://jsfiddle.net/j4c7U/82/

Answer 3

如果你想在刷新/加载页面时打开弹出窗口，只需模拟一下这样的点击：

document.getElementById("LearnMoreBtn").click();

小提琴：http://jsfiddle.net/j4c7U/

弹出页面重新加载

3 个答案: