使用 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: visible...为什么这不起作用？

Answer 1

此处缺少语法 - 带括号 - 您还需要调用 popup() 作为在单击时或需要时调用的函数。我假设叠加层内的按钮是执行另一个功能，例如关闭叠加层，对吗？

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

Answer 2

题目有瑕疵，如果一开始就"overlay"隐藏，那么点击什么？
单击按钮 "accept" 您正在调用一个不存在的函数。
函数的定义和声明总是使用括号 () ，您的问题中缺少括号。

解决方案 1：我在演示中将 p 元素的 id 作为 p1，最初使用 visibility: hidden; 将其隐藏； 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 3

最好使用 display:none;，因为 visibility:hidden; 在页面上占用 space。使用显示属性创建不占用space

的隐形元素

演示

https://jsfiddle.net/5sep0y5f/

代码

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

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

使用 JavaScript 在页面加载时显示弹出窗口

Display Popup on page load using JavaScript

html

javascript

css

visibility

popup