ポップアップで固定位置を使用する問題

Question

この問題は、ボタンを押した後に表示されるポップアップで位置固定が機能しない場所で作業しているプロジェクトの問題です。ポップアップはモバイルデバイスにのみ表示されるため、この問題はモバイルビューポートで発生します。

問題は、固定位置にするためにポップアップが必要なため、ページ上のどこにあっても常にユーザーの画面の中央に残ります。

私のWebページへのリンクです：http://bayron.nl/recepten-toevoegen-template.html

あなたは携帯サイズにサイズを変更し、ドロップダウン見ているボタン（下の画像）までスクロールして、それをクリックした場合。固定配置を使用するポップアップが表示されますが、機能しません。

ご協力いただきありがとうございます。

Answer 1

ちょうどそれを得るためにpositionを使用しています。 同じものを得るには、以下のCSSを使用してください。

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>