CSS - 固定モーダルを反応的にする

Question

CSSでポップアップを作成しました。携帯端末でポップアップを確認しても、スクロールできません。

.popup { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 20%; 
 
    width: 100%; 
 
    max-width: 500px; 
 
    margin: auto; 
 
    background: #fff; 
 
    padding: 40px; 
 
    text-align: center; 
 
    box-shadow: 0 0 90px #aaa; 
 
    z-index: 410; 
 
}

<div class="popup"> 
 
    <h2>Login</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p> 
 
</div>

プレビュー：https://jsfiddle.net/ea1grfqr/

Answer 1

で動作することがポップアップするので、私はpositionはfixedである必要はありませんと仮定しています。 positionをabsoluteに変更してください。 Here's more about positioning。

.popup { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 20%; 
 
    width: 100%; 
 
    max-width: 500px; 
 
    margin: auto; 
 
    background: #fff; 
 
    padding: 40px; 
 
    text-align: center; 
 
    box-shadow: 0 0 90px #aaa; 
 
    z-index: 410; 
 
}

<div class="popup"> 
 
    <h2>Login</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p> 
 
</div>

Answer 2

私はHTMLでスクロールバーのコードを与えているの下には、これが見られるように全体のポップアップを可能にした場合、以下を参照してください

<div id="" style="overflow-y: scroll; height:400px;"> 

あなたの好みに合わせて高さを変更する必要があります。

Answer 3

heightたとえば50%が必要な場合は、overflow: autoを使用します。

position:fixed;

.popup { 
     height: 50%; 
     overflow: auto; 
     position: fixed; 
     left: 0; 
     right: 0; 
     top: 20%; 
     width: 100%; 
     max-width: 500px; 
     margin: auto; 
     background: #fff; 
     padding: 40px; 
     text-align: center; 
     box-shadow: 0 0 90px #aaa; 
     z-index: 410;  
    }