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，使弹出窗口出现在pageload：

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

我正在尝试将css visibility: hidden更改为visibility: visible ....为什么这不起作用？

Answer 1

问题有缺陷，如果你做了＃34; overlay＆＃34;最初隐藏，然后会点击什么？
点击按钮＆＃34;接受＆＃34;你正在调用一个不存在的函数。
使用括号（）定义并声明函数，在您的问题中缺少该函数。

解 1：我在我的演示中将p元素作为p1给了p1，最初使用visibility：hidden隐藏了它; 2：点击按钮调用适当的功能，使段落可见。

DEMO：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

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

3 个答案: