Home>

There is the following modal window:

.cart-container {
  Position: Fixed;
  Top: 0;
  left: 0;
  z-index: 29;
  width: 100%;
  Height: 100%;
  Background: RGBA (0, 0, 0, .85);
}
.cart {
  Position: relative;
  z-index: 30;
  margin: 30px auto;
  Height: 1100px;
  Padding: 35px;
  Background: #FFF;
  Max-width: 700px;
  Overflow: AUTO;
}
.cart__info {
  margin-top: 900px;
} 
<
DIV Class= "Cart-Container" >
  ≪
DIV CLASS= "CART" >
    ≪
DIV Class= "Cart__Header" >
Ordering <
/div >
    ≪
DIV Class= "Cart__Product" >
Product <
/div >
    ≪
DIV Class= "Cart__upsales" >
APSEILS <
/div >
    ≪
DIV Class= "Cart__info" >
Info <
/div >
  ≪
/div >
≪
/div >

But for some reason it does not work vertical scroll, although its size is greater than the screen size. How to properly do the vertical scroll of the modal window?

CP: https://codepen.io/alexxosipov/pen/wyeaqe.

  • Answer # 1

    Make Overlay separate block and ask him styles Cart-Container. . This is the easiest example. If you want to study more cheerfully, view the code of ready-made plugins (Magnific and TP).

    .g-overlay {
      Position: Fixed;
      Top: 0;
      left: 0;
      z-index: 29;
      width: 100%;
      Height: 100%;
      Background: RGBA (0, 0, 0, .85);
      //Overflow: Hidden;
    }
    .cart {
      Position: relative;
      z-index: 30;
      margin: 30px auto;
      //Height: 1100px;
      Padding: 35px;
      Background: #FFF;
      Max-width: 700px;
      //Overflow: AUTO;
      Height: AUTO;
    }
    .cart__info {
      margin-top: 900px;
    } 
    <
    DIV Class= "G-overlay" >
    ≪
    /div >
    ≪
    DIV Class= "Cart-Container" >
      ≪
    DIV CLASS= "CART" >
        ≪
    DIV Class= "Cart__Header" >
    Ordering <
    /div >
        ≪
    DIV Class= "Cart__Product" >
    Product <
    /div >
        ≪
    DIV Class= "Cart__upsales" >
    APSEILS <
    /div >
        ≪
    DIV Class= "Cart__info" >
    Info <
    /div >
      ≪
    /div >
    ≪
    /div >