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

【问题标题】：Display Popup on page load using JavaScript使用 JavaScript 在页面加载时显示弹出窗口
【发布时间】：2015-06-17 12:05:06
【问题描述】：

以下是我的弹出式 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....为什么这不起作用？

【问题讨论】：

您的 onclick="overlay()" 函数调用的是覆盖而不是弹出窗口？并且您的弹出功能需要括号
我是网络开发新手...我知道我的编码风格还不是最适合这个的
我只是指出问题，你可以尝试修复它，看看弹出是否有效。
@Syahrul 缺少括号是什么问题....您建议删除问题吗？

标签： javascript html css popup visibility

【解决方案1】：

最好使用display:none;，因为visibility:hidden; 会占用页面空间。使用 display 属性创建不占用空间的不可见元素

演示

https://jsfiddle.net/5sep0y5f/

代码

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

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

【讨论】：

【解决方案2】：

问题有缺陷，如果你一开始隐藏了“覆盖”，那么点击什么？
单击“接受”按钮时，您正在调用一个不存在的函数。
函数的定义和声明始终使用括号 () ，而您的问题中没有。

解决方案 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;
}

【讨论】：

我添加了另一个功能。弹出窗口是免责声明。当用户接受时，它就会消失。感谢您的输入。我接受了你的回答。

【解决方案3】：

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

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

【讨论】：