Cen

[rkato1131]

I am trying to create a theme app extension for the products page in which a modal is displayed to the user prior to adding a product to their cart. However, I can't seem to get the modal centered on the page itself - it is always centered over the product information to the right of the product picture. 

Is it possible to get this modal centered within this theme app extension? My application is multi-tenant so I don't want to have to edit a theme directly to accomplish this. Here is the css I am using for the modal:

  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 600px;
    min-height: 400px;
    padding: 10px;
    border: 1px solid black;
    background-color: lightgray;
    color: black;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 5px;
    z-index: 100;
  }