Why is my popup window not appearing above all other html elements? - html

Question

.box {
width: 40%;
margin: 0 auto;
padding: 35px;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
display: inline-block;
}
.button {
font-size: 1em;
padding: 10px;
color: #222;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
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: 40%;
position: relative;
transition: all 5s ease-in-out;
z-index: 999 !important;
}
.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: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
This is my css on a button which will trigger a popup window. However, some of the elements under(supposed to be) the popup showed up and covered the text on the popup window. I have already tried to set the z-index to 99999 but it doesn't work at all. Any idea?
Below is the html code as suggested
<div class="box">
<a class="button" href="#popup1">News</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Upcoming event</h2>
<a class="close" href="#">×</a>
<div class="content">
Christmas is coming! The first ever Christmas tour to Australia is coming soon. We are looking forward to see you.
</div>
</div>
</div>
Edited:
I guess I need to provide more to explain. The input field below and the iframe element will covered my pop up window, not just simply appear behind the popup due to the transparent property. The background will be in a little of gray after the popup triggered, but the element will be shown in background color of white which the default color of my webpage. And the below element showed up without being covered....
<div class="container">
<div class="row">
<div class="col-lg-6">
Youtube Playlist
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
Youtube Single Video
</div>
</div>
<form class="form-horizontal" method="POST">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon"><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('yttt') .style.display=='none') {document.getElementById('yttt') .style.display=''}else{document.getElementById('yttt') .style.display='none'}">Show/Hide</button></span>
<input type="text" class="form-control" id="ytlistbox"><span class="input-group-btn"><button class="btn btn-default" id="listclick">Preview</button></span>
<span class="input-group-btn"><button class="btn btn-default" id="singleclick">Confirm</button></span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon"><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('ytt') .style.display=='none') {document.getElementById('ytt') .style.display=''}else{document.getElementById('ytt') .style.display='none'}">Show/Hide</button></span>
<input type="text" class="form-control" id="ytsinglebox"><span class="input-group-btn"><button class="btn btn-default" id="singleclick">Preview</button></span>
<span class="input-group-btn"><button class="btn btn-default" id="singleclick">Confrim</button></span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</form>
<br />
<?php
$query2 = mysql_query("SELECT listurl, singleurl FROM tbluser WHERE user_Id = '$userid'");
$row2 = mysql_fetch_assoc($query4);
?>
<div id="yttt" class="col-lg-6" style="display: ;">
<iframe id="ytlist" src="https://www.youtube.com/embed/videoseries?list=<?php echo $row2['$listurl']?>&autoplay=1&loop=1" name="ytlist" width="550" height="400" frameborder="0" allowfullscreen></iframe>
</div>
<div id="ytt" class="col-lg-6" style="display: ;">
<iframe id="ytsingle" src="" name="ytsingle" width="550" height="400" frameborder="0" allowfullscreen></iframe>
</div>
</div>
I know quite a few of the advantage for using mysqli, strip_tag() and real_escape_string() function for security purpose. Please don't mention them again.

Answer 1

add top property 0
.overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index:999;
}

Answer 2

May be you should give z-index to .overlay
.overlay{
position: fixed;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index:999;
}
or
This is happening because you have used semi transparent background-color for .overlay
background: rgba(0, 0, 0, 0.7);
If you don't want to show background element then use solid color #000 or #888 etc.
.box {
width: 40%;
margin: 0 auto;
padding: 35px;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
display: inline-block;
}
.button {
font-size: 1em;
padding: 10px;
color: #222;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background: #888;
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: 40%;
position: relative;
transition: all 5s ease-in-out;
z-index: 999 !important;
}
.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: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
<div class="box">
<a class="button" href="#popup1">News</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Upcoming event</h2>
<a class="close" href="#">×</a>
<div class="content">
Christmas is coming! The first ever Christmas tour to Australia is coming soon. We are looking forward to see you.
</div>
</div>
</div>
<h1><center>User profile</center></h1>

Answer 3

You need z-index to control divs/elements layers position.
FYI: z-index needs position property to work, like relative, absolute, fixed...