Показать всплывающее сообщение внутри всплывающего сообщения

Я разрабатываю код JavaScript. Когда я нажимаю кнопку «Click me», появится всплывающее сообщение с сообщением и кнопкой «ok». Когда я нажимаю кнопку «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

источник

2015-10-08 Aishy

JSFiddle, пожалуйста. –

В основном просто создать еще один specialBox, скажем specialBoxTwo, и вы можете иметь функцию, чтобы переключить этот элемент. toggleOverlayTwo(). Ваша первая кнопка будет называть оба тумблера (первую, чтобы закрыть первую накладку, второй один, чтобы открыть вторую накладку):

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

И второе наложение необходимо только для переключения второго пункта:

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

Fiddle Example. Примечание это скорее «быстрый и грязный» пример. Вы можете очистить это, но, возможно, одну функцию переключения, которая принимает параметр и использует классы для каждого speicalBox.

Here is a fiddle example с использованием только одной функции toggleOverlay(item), которая принимает параметр.

источник

2015-10-08 05:45:04

Большое спасибо Спенсер, он отлично работает. Еще раз спасибо. – Aishy

@ Aishy Нет проблем, обратите внимание, что отметьте этот ответ как принятый, нажав на галочку слева. –

Показать всплывающее сообщение внутри всплывающего сообщения

ответ

Смежные вопросы