Кнопка не может быть нажата дважды

Почему кнопка «1» может быть нажата только один раз? после первого щелчка он не будет отвечать. это произошло после того, как я добавил height = 100%, но я все еще не могу понять, почему.Кнопка не может быть нажата дважды

Javascript для дополнительных кнопок, которые я планирую добавить.

Спасибо всем, кто может помочь!

<html> 
<head> 
<style> 

html,body 
{ 
height: 100%; 
} 
body { 
background-color: white; 
width: 960px; 
margin: auto; 
position: relative; 
} 

.one { 
background-color:blue; 
color: black; 
font-size: 45px; 
text-decoration: none; 
text-align: center; 
width: 60px; 
height: 60px; 
overflow:hidden; 
float:left; 
position:absolute; 
transition: .5s ease; 
top: 250px; 
left: 240px; 
text-align: center; 
} 
.one:hover { 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
color: #21211e; 
font-size: 45px; 
vertical-align: center; 
} 

.overlay { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
background: rgba(0, 0, 0, 0.8);; 
transition: opacity 500ms; 
visibility: hidden; 
opacity: 0; 
z-index:0; 
} 

.overlay:target { 
visibility: visible; 
opacity: 1; 
} 

.popup { 
margin: 70px auto; 
padding: 20px; 
background: #fff; 
border-radius: 5px; 
width: 30%; 
position: relative; 
transition: all 5s ease-in-out; 
} 

.popup h2 { 
margin-top: 0; 
color: #333; 
font-family: Tahoma, Arial, sans-serif; 
} 

.popup .close { 
position: absolute; 
top: 20px; 
right: 30px; 
transition: all 200ms; 
font-size: 30px; 
font-weight: bold; 
text-decoration: none; 
color: #333; 
} 

.popup .close:hover { 
color: orange; 
} 

.popup .content { 
max-height: 30%; 
overflow: auto; 
} 

</style> 
</head> 
<body> 

<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a> 
<div id="popup1" class="overlay"> 
<div class="popup"> 
    <h2>Here i am</h2> 
    <a class="close" href="#">×</a> 
    <div class="content"> 
     1 
    </div> 
</div> 
</div> 

<script type="text/javascript"> 
function changeZIndex(elm) { 
    if (elm.className == "one") { 
     document.getElementById('one').style.zIndex = -1; 
    } 
} 
</script> 
</body> 
</html>

источник

2015-10-13 ValerieH

, похоже, работает здесь: http://jsfiddle.net/swm53ran/355/, если ваша желаемая функциональность состояла в том, чтобы щелкнуть '1' и иметь модальное всплывающее окно с наложением, а затем, как только вы выйдете из всплывающего окна,' 1' можно снова щелкнуть. – indubitablee

Это все еще не работает для меня в моем браузере, как это может быть? – ValerieH

Проблема, которую вы видите здесь, является предметом Z-индекса. По сути, вы можете видеть кнопку, но вы замаскируете объект перед ним. Чтобы ссылка была кликабельной, она не может быть покрыта чем-то более низким индексом Z.

источник

2015-10-13 21:02:59 cbuchert

Но проблема возникла после добавления «height = 100%; , если я удалю его, он отлично работает. – ValerieH

Не давая 'html' и' body' высоту 100%, они фактически не имеют вертикального размера, потому что единственное содержимое позиционируется абсолютно и не регистрируется. Как только вы его добавите, клик сделает так, чтобы элемент стал помещаться под 'body'. Я уверен, что плакат этого ответа означает, что, кстати, «покрывается чем-то с * более высоким z-индексом». – Shikkediel

Спасибо за ваш ответ, так есть ли способ заставить его работать с сохранением java-кода? – ValerieH

Кнопка не может быть нажата дважды

ответ

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