Pourquoi mon contenu apparaît-il à l'extérieur?

Il y a un bouton qui peut être cliqué pour amener div '1234-variation-options' vers le haut. J'essaie d'ajouter un titre à div '1234-variation-options', mais le problème est qu'il apparaît aussi quand le div est supposé être 'fermé'.Pourquoi mon contenu apparaît-il à l'extérieur?

CORRECT INCORRECT

Voici ce que j'ai essayé:

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

Je suis désolé si ma question est claire. S'il vous plaît laissez-moi savoir si d'autres détails seraient utiles pour vous de savoir.

Merci d'avance!

Source

2017-07-18 l_nxy

Pourquoi n'êtes-vous pas en utilisant javascript/jQuery pour cela? – Rubenxfd

Je comprends que JS peut être utilisé pour cela, mais mon problème actuel est que les données apparaissent déjà en dehors de l'endroit où il est censé, même avant que je le veuille. Merci pour toutes les réponses si. –

vous devez ajouter

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

Source

2017-07-18 06:13:35 Rahul

Essayez d'ajouter ce style:

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

Source

2017-07-18 06:12:00 kloshar4o

Au lieu d'utiliser CSS, vous pouvez également utiliser jQuery pour cela. Avec la fonction hide() vous pouvez le cacher, et quand le bouton est cliqué vous pouvez le faire apparaître. Ajoutez simplement ceci à votre dossier de js, mais soyez sûr d'ajouter une bibliothèque de jQuery si vous n'en avez pas déjà.

$(document).ready(function(){ 

    $('h1').hide(); 

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

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

});

Regardez ce fiddle

Source

2017-07-18 06:16:28 Rubenxfd

Pourquoi mon contenu apparaît-il à l'extérieur?

Répondre

Questions connexes