The standard HTML markup of popup window has a structure:
<div class="... has-popup">
<a href="#" class="... js-open-popup js-body-overlay">..</a>
<div class='window-popup'>
<div class="mCustomScrollbar" data-mcs-theme="dark">
<div class='content'>
<a class='js-open-popup js-body-overlay popup-close' href='#'>
..
</a>
...
</div>
</div>
</div>
</div>
“has-popup” – it is the main parent block, which responsible for window location. It can be any independent block, the main condition is the presence of the class "has-popup"
Following is the button for opening the pop-up window. In general, it can be any element, not necessarily a link, most importantly it must have the class "js-open-popup js-body-overlay", which is responsible for opening the window.
<div class='window-popup'>.. - the main parent of popup-window block
<div class='content'> - wrap for window content
<a class='js-open-popup js-body-overlay popup-close' href='#'> - button for closing the window
You can easily modify the content of any pop-up window and add them to any place as well.