按钮无法按两次

为什么键“1”可以只按下一个时间？第一次点击后它不会回应。它发生在我添加高度= 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-index值较低的东西覆盖。

来源

2015-10-13 21:02:59 cbuchert

但添加'height = 100％后出现问题; ，如果我将它删除，它的作品完美。 – ValerieH

不给'html'和'body'一个100％的高度，它们实际上没有垂直维度，因为唯一的内容是绝对定位的，并且不会注册。只要你添加它，点击就可以使元素放置在“body”本身之下。顺便说一句，我确信这个答案的海报意味着“被某个*更高* z-索引的东西所覆盖”。 – Shikkediel

感谢您的回答，那么有没有什么办法可以让它保持java代码？ – ValerieH

按钮无法按两次

回答

相关问题