Question

我正在开发一个JavaScript代码。当我点击“Click me”按钮时，会弹出一条消息，显示一条消息和“ok”按钮。当我点击弹出消息上的“确定”按钮时，它将关闭。现在我要做的是当我点击弹出窗口中的“确定”按钮时，它应该关闭，我想用另一个按钮显示另一个弹出窗口。如果单击该按钮，则还应关闭第二个弹出消息。这是我到目前为止的代码。

<!DOCTYPE html>
<html>
<head>

<style>

div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}

div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px; 
height: 300px;
background: #FFF;
color: #000;
}

div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}

</style>

<script>



function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .4;
if(overlay.style.display == "block"){
    overlay.style.display = "none";
    specialBox.style.display = "none";
} else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
}
}

</script>

</head>

<body>


<div id="overlay"></div>



<div id="specialBox">



 <p><center>Great job<center></p> 



<center><button onmousedown="toggleOverlay()">Ok</button><center>

</div>


<div id="wrapper">

 <p><center>Please click the button<center></p> 



<button onmousedown="toggleOverlay()">Click me</button>

</div>


</body>

</html>

JsFiddle Demo

Answer 1

基本上只需创建另一个specialBox，说specialBoxTwo，您就可以使用函数来切换该项目。 toggleOverlayTwo()。你的第一个按钮会调用两个切换（第一个关闭第一个叠加，第二个打开第二个叠加）：

<button onmousedown="toggleOverlay();toggleOverlayTwo()">Ok</button>

第二个叠加层只需要切换第二个项目：

<button onmousedown="toggleOverlayTwo()">Ok</button>

Fiddle Example。注意这是一个“快速而肮脏”的例子。您可以清理它，但可能只有一个切换函数，它接受一个参数并为每个speicalBox使用类。

Here is a fiddle example仅使用带有参数的单个toggleOverlay(item)函数。

在弹出消息中显示弹出消息

1 个答案: