按鈕無法按兩次

爲什麼鍵「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

按鈕無法按兩次

回答

相關問題