CODEWITHSUNDEEP
htmlcss
ValerieH
ValerieH

Reputation: 37

CSS is not working for one of the buttons

Why when pressing the first button, the second button wont get opacity. But when pressing the second button, the first one does get the opacity?

Also when pressing the first, the second one can be pressed withour closing the popup window.

Thanks so much for everyone that can help! 

<style>
body {
background-color:#121212;
}


.one {
color: #DEDEDE;
font-size: 65px;
text-decoration: none;
text-align: center;
width: 80px;
height:0;
padding-bottom: 80px;
border-radius: 80px;
border:3px solid #cfdcec;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 180px;
left: 140px;
text-align: center;
text-vertical-align: middle;
}


.two {
color: #DEDEDE;
font-size: 65px;
text-decoration: none;
text-align: center;
width: 80px;
height:0;
padding-bottom: 80px;
border-radius: 80px;
border:3px solid #cfdcec;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 180px;
left: 240px;
text-align: center;
text-vertical-align: middle;
}

.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;
}

.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" href="#popup1">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>

<a class="two" href="#popup2">2</a>
<div id="popup2" class="overlay">
<div class="popup">
    <h2>Here i am</h2>
    <a class="close" href="#">×</a>
    <div class="content">
        2
    </div>
</div>
</div>

</body>
</html>

Upvotes: 0

Views: 371

Answers (2)

The fourth bird
The fourth bird

Reputation: 163207

Using javascript, you can toggle the z-index of the hyperlinks.

I think this is a possibility:

<html>
<head>
<style>
body {
    background-color:#121212;
}

.one {
    color: #DEDEDE;
    font-size: 65px;
    text-decoration: none;
    text-align: center;
    width: 80px;
    height:0;
    padding-bottom: 80px;
    border-radius: 80px;
    border:3px solid #cfdcec;
    overflow:hidden;
    float:left;
    position:absolute;

    top: 180px;
    left: 140px;
    text-align: center;
    text-vertical-align: middle;
}


.two {
    color: #DEDEDE;
    font-size: 65px;
    text-decoration: none;
    text-align: center;
    width: 80px;
    height:0;
    padding-bottom: 80px;
    border-radius: 80px;
    border:3px solid #cfdcec;
    overflow:hidden;
    float:left;
    position:absolute;

    top: 180px;
    left: 240px;
    text-align: center;
    text-vertical-align: middle;
}

.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>
<a class="two" id="two" href="#popup2" onclick="changeZIndex(this)">2</a>
<div id="popup2" class="overlay">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" href="#">×</a>
        <div class="content">
            2
        </div>
    </div>
</div>

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

Upvotes: 1

Kesavamoorthi
Kesavamoorthi

Reputation: 969

The reason for opacity issue (actually it is not a opacity issue with button but the popup overlay. If you analyse it deeply there is no issue with opacity) is the html elements order/stack. When you click first button the popup1 pops up which is placed after the first button on the html so the first button was covered by the overlay. So it looks like some opacity applied on the button. But when you click the second button the popup2 pops up which is on top of all the elements so the first and second buttons are covered by the overlay.

You are using the :target pseudo selector to open the popup. At a time only one target (one hash tag on the url) is possible. So you can't open both at a time.

You can do some tricks with `z-index' for the first issue. But I don't think you can resolve the second issue without javascript.

Upvotes: 0

Related Questions