Positioning a modal?

Question

JavaScript

Help to solve the issue with the positioning of the modal window.

There is a block with fixed sizes and overflow: scroll; (class="content").
Inside the block is larger, so there is scrolling (class="content__box").

It is necessary that the modal window appears on click in the place of the click and does not go beyond the first block (class="content").

Already completely confused

Sandbox
https://jsfiddle.net/SergeyA_/6kx84qa2/174/

Answer 1

1. At the time of the click, before making the popup visible, you read the position of the pointer (x, y coordinates). These are the preliminary coordinates for your modal.
   
2. Next, you calculate the size of the modal itself. And check whether it will get out of the screen. For example: if X coordinate + Modal width is greater than container width -- move the modal to the left until it fits.
   
3. Apply the received position values ​​to the element and make it visible.