コンテンツが外部に表示されるのはなぜですか？

divを'1234-variation-options 'にするためにクリックできるボタンがあります。私は'1234-variation-options 'divにタイトルを追加しようとしていますが、divが' closed 'になったときにも表示されるという問題があります。ここでコンテンツが外部に表示されるのはなぜですか？

CORRECT INCORRECT

私が試したものです：

.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

で

$(document).ready(function(){ $('h1').hide(); $('.variation-options').click(function(){ $('h1').fadeIn(); }); $('.closebtn').click(function(){ $('h1').fadeOut(); }); });

ルック？ – 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

代わりのあなたも、このためにjQueryを使用することができますCSSを使用して追加する必要があります。 hide()関数を使用すると、そのボタンを非表示にできます。ボタンをクリックすると、そのボタンを表示させることができます。これをjsファイルに追加するだけですが、jQueryライブラリがない場合は、jQueryライブラリを必ず追加してください。あなたはこのためにはJavaScript/jQueryのを使用していないのはなぜこのfiddle

出典

2017-07-18 06:16:28 Rubenxfd

コンテンツが外部に表示されるのはなぜですか？

答えて

関連する問題