Question

有一个按钮可以点击以启用div'1234-variation-options'。我正在尝试为“1234-variation-options”div添加一个标题，但问题是当div应该被“关闭”时它也会出现。

以下是我尝试过的内容：

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.8); /* Black w/opacity */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay .closebtn {
	color: white;
    position: absolute;
    top: 50px;
    right: 40px;
    font-size: 25px;
}

.closebtn:hover {
	text-decoration: none;
}

.overlay-title {

}

.overlay-content {
    /*position: relative;*/
    position: absolute;
    
    width: 100%;
    height: 75%;
    /*text-align: center;*/
    margin-top: 10px;
    overflow: scroll;
}

<a
  href="#1234-variation-options"
  class="variation-options button"
  onclick="document.getElementById('1234-variation-options').style.width = '100%';">
  View variations
</a>
<div id="1234-variation-options" class="overlay">
  <div
    class="overlay-title"
    style="background-color: blue; position: absolute; width: 100%;">
    <h1 style="position: relative; margin-top: 200px; color: black; background-color: yellow;">
      test test
    </h1>
    <a
      class="closebtn"
      onclick="document.getElementById('1234-variation-options').style.width = 0;">
      &times;
    </a>
  </div>
</div>

如果我的问题不清楚，我很抱歉。如果有任何其他细节对您有所帮助，请与我们联系。

提前致谢！

Answer 1

尝试添加此样式：

#1234-variation-options{
    overflow:hidden;
}

Answer 2

你需要添加

.overlay {
 overflow:hidden;
}

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.8); /* Black w/opacity */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    
    overflow:hidden;
}

.overlay .closebtn {
	color: white;
    position: absolute;
    top: 50px;
    right: 40px;
    font-size: 25px;
}

.closebtn:hover {
	text-decoration: none;
}

.overlay-title {

}

.overlay-content {
    /*position: relative;*/
    position: absolute;
    
    width: 100%;
    height: 75%;
    /*text-align: center;*/
    margin-top: 10px;
    overflow: scroll;
}

<a
  href="#1234-variation-options"
  class="variation-options button"
  onclick="document.getElementById('1234-variation-options').style.width = '100%';">
  View variations
</a>
<div id="1234-variation-options" class="overlay">
  <div
    class="overlay-title"
    style="background-color: blue; position: absolute; width: 100%;">
    <h1 style="position: relative; margin-top: 200px; color: black; background-color: yellow;">
      test test
    </h1>
    <a
      class="closebtn"
      onclick="document.getElementById('1234-variation-options').style.width = 0;">
      &times;
    </a>
  </div>
</div>

Answer 3

您也可以使用jQuery代替使用CSS。使用hide()功能，您可以隐藏它，当单击按钮时，您可以显示它。只需将其添加到您的js文件中，但如果您还没有jQuery库，请务必添加它。

$(document).ready(function(){

    $('h1').hide();

    $('.variation-options').click(function(){
        $('h1').fadeIn();
    });

    $('.closebtn').click(function(){
        $('h1').fadeOut();
    });

});

看看这个fiddle

为什么我的内容出现在外面？

3 个答案: