How can I make the modal window always appear on the user's page when loading? But that it was not fixed, because its height is greater than the height of the screen. thank

  • .mywnd { width: 60%; margin: auto; display:block; } .mywnd { width: 60%; margin: auto; display:block; } - Stack
  • 2
    Telepathy does not suffer, give an example code - korytoff

1 answer 1

 body { margin: 0; padding: 0; background-image: url("https://wallpaperscraft.com/image/clouds_sun_sunset_colors_height_air_sky_48024_1920x1080.jpg"); } .modal { position: fixed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .modal .modal_content { width: 80%; min-width: 300px; min-height: 75vh; max-height: 80vh; overflow-y: scroll; background-color: #fff; } 
 <div class="modal"> <div class="modal_content">Content.... <br><a href="http://codepen.io/anon/pen/YwjvNb" target="_blank">Пример на codepen.io</a></div> </div>

About FlexBox: in Russian and English

Support FlexBox caniuse.com