爲什麼我的內容出現在外面？

有一個按鈕可以點擊，使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 { 
 
\t color: white; 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 40px; 
 
    font-size: 25px; 
 
} 
 

 
.closebtn:hover { 
 
\t 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>

對不起，如果我的問題是不清楚。請讓我知道，如果任何其他細節將有助於你知道。

在此先感謝！

來源

2017-07-18 l_nxy

你爲什麼不使用JavaScript/jQuery的這個？ – Rubenxfd

我明白JS可以用於此目的，但我目前的問題是，即使在我希望它之前，數據已經出現在它應該在的位置之外。感謝所有的迴應。 –

你需要添加

.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 { 
 
\t color: white; 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 40px; 
 
    font-size: 25px; 
 
} 
 

 
.closebtn:hover { 
 
\t 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>

來源

2017-07-18 06:13:35 Rahul

嘗試增加這種風格：

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

來源

2017-07-18 06:12:00 kloshar4o

而不是使用CSS，你也可以使用jQuery這個的。使用hide()函數可以隱藏它，當點擊按鈕時，可以使其顯示。只需將其添加到您的js文件中，但如果您還沒有jQuery文件，請務必添加一個jQuery庫。

$(document).ready(function(){ 

    $('h1').hide(); 

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

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

});

看這個fiddle

來源

2017-07-18 06:16:28 Rubenxfd

爲什麼我的內容出現在外面？

回答

相關問題