彈出框的頁面重載

您好我只是覺得在谷歌的代碼，我不知道如何觸發彈出負載或網頁箱子刷新彈出框的頁面重載

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/

來源

2013-12-12 Allen Aquino

入住這一點 -

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

你只是不得不把彈出代碼窗口中加載功能而不是從的onclick函數調用它。

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

來源

2013-12-12 10:45:57 skos

非常感謝你的作品很棒 –

如果你想打開的時候他們是刷新/頁面加載彈出式窗口，只是模擬像點擊：

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

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

來源

2013-12-12 10:48:38 SushiiBalboha

爲什麼不直接刪除display:none; from #overlay and #popup，這會在加載或刷新頁面時顯示默認彈出窗口。

更新JSfiddle。

來源

2013-12-12 10:50:06 Jonathan

彈出框的頁面重載

回答

相關問題