Problème avec le positionnement fixe sur le popup

Question

J'ai donc ce problème sur lequel je travaille, où la position fixée ne fonctionnera pas sur un popup qui apparaît après avoir appuyé sur un bouton. Le problème se produit dans les fenêtres mobiles uniquement puisque la fenêtre contextuelle est uniquement affichée sur les appareils mobiles. Le problème est que j'ai besoin que le popup ait une position fixe pour qu'il reste toujours au milieu de l'écran des utilisateurs, peu importe où ils se trouvent sur la page.

Le lien vers ma page Web est: http://bayron.nl/recepten-toevoegen-template.html

Si vous redimensionnez à une taille mobile et faites défiler vers le bas à un bouton déroulant à la recherche (image ci-dessous) et cliquez sur ce. Vous pourrez voir le popup qui utilise le positionnement fixe, mais cela ne fonctionne pas.

Toute aide est grandement appréciée!

Answer 1

Il suffit d'utiliser position pour l'obtenir. Utilisez ci-dessous css pour obtenir le même.

body, html { 
 
    min-height:100%; 
 
    height:100%; 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
.box { 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    background:rgba(0,0,0,0.3); 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.popup { 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    width:200px; /* Change as your requirement */ 
 
    height:200px; /* Change as your requirement */ 
 
    background:#fff; 
 
    transform:translate(-50%, -50%); 
 
    z-index:9999; 
 
}

<div class="box"> 
 
    <div class="popup"> 
 
     popup 
 
    </div> 
 
</div>