为什么我的弹出窗口没有出现在所有其他html元素之上？

时间：2016-12-26 13:30:00

标签： html css 

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

这是我的按钮上的css，它会触发一个弹出窗口。但是，弹出窗口中的某些元素（应该是）弹出并覆盖了弹出窗口中的文本。我已经尝试将z-index设置为99999，但它根本不起作用。有什么想法吗？

以下是建议的HTML代码

            <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="#">&times;</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>

编辑：

我想我需要提供更多解释。下面的输入字段和iframe元素将覆盖我的弹出窗口，而不仅仅是因为透明属性而出现在弹出窗口后面。弹出窗口触发后背景会有点灰色，但元素将以白色的背景颜色显示，这是我网页的默认颜色。 Like this下面的元素没有被覆盖...... 

<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>

为了安全起见，我知道使用mysqli，strip_tag（）和real_escape_string（）函数的一些优点。请不要再提起它们了。

3 个答案:

答案 0 :(得分：1)

您可以将z-index提交给.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;
}

或

这种情况正在发生，因为您对background-color

使用了半透明.overlay 
background: rgba(0, 0, 0, 0.7);

如果您不想显示背景元素，请使用纯色#000或#888等。

＆＃13;
＆＃13; 
.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%;
  }
}
＆＃13; 
<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="#">&times;</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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

添加顶级属性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;
}

答案 2 :(得分：0)

您需要z-index来控制div /元素图层的位置。 仅供参考：z-index需要位置属性才能工作，如相对，绝对，固定......

相关问题
最新问题