使用JavaScript在頁面加載時顯示彈出窗口

Question

以下是我的HTML彈出窗口：

<div id="overlay">

     <div>
        <header>
            <h2 class="modalHeader">Disclaimer:</h2>
        </header>
        <p>"xxxxxxxx"</p>           
        <button id="acceptButton" onclick="overlay()">Accept</button>

     </div>
</div>

以下是我關注的彈出窗口的CSS：

#overlay {
     visibility:   hidden;
     /*position: absolute;*/
     left:         0px;
     top:          0px;
     width:        100%;
     height:       100%;
     text-align:   justify;
     z-index:      1000;
     font-family:  candara;

}

以下是我的使彈出窗口顯示在頁面加載中的JavaScript：

function popup{
var overlay = document.getElementById("overlay");
overlay.style.visibility = "visible";
}

我正在嘗試將css visibility: hidden更改為visibility: hidden為visibility: visible ....為什么這不起作用？

Answer 1

• 這些問題有缺陷，如果您最初隱藏“覆蓋層”，那么將單擊什么？
• 在單擊“接受”按鈕時，您正在調用一個不存在的函數。
• 該函數始終使用括號（）進行定義和聲明，這在您的問題中遺漏了。

解決方案1：在我的演示中，我將p元素的id賦予p1，最初通過使用可視性使其隱藏。 2：在單擊按鈕時調用使該段落可見的適當功能。

演示： http : //jsfiddle.net/5aww1sef/2/

<script>
function overlay() {
    var overlay = document.getElementById("p1");
    overlay.style.visibility = "visible";
}
</script>


<div id="overlay">
     <div>
        <header>
            <h2 class="modalHeader">Disclaimer:</h2>
        </header>
        <p  id="p1">"xxxxxxxx"</p>           
        <button id="acceptButton" onclick="overlay()">Accept</button>

     </div>
</div>

#overlay {
     left:         0px;
     top:          0px;
     width:        100%;
     height:       100%;
     text-align:   justify;
     z-index:      1000;
     font-family:  candara;
}
#p1{
     visibility:   hidden;
}

Answer 2

此處缺少語法-帶括號-您還需要調用popup（）作為在單擊時或需要時調用的函數。 我認為覆蓋層內的按鈕是要執行其他功能，例如關閉覆蓋層嗎？

function popup() {
var overlay = document.getElementById("overlay");
overlay.style.visibility = "visible";
}

Answer 3

最好使用display:none; visibility:hidden; 占用頁面上的空間。 使用display屬性創建不占用空間的不可見元素

演示版

https://jsfiddle.net/5sep0y5f/

碼

document.getElementById('overlay').style.display = 'block'; // show

document.getElementById('overlay').style.display = 'none'; // hide