IN THE HEAD:
<style>
/* position: absolute, display: none and max-width: calc(100% - 40px) are required */
.closeable_from_outside {position: absolute; display: none; max-width: calc(100% - 40px); z-index: 9999; line-height: 25px;  box-shadow: 8px 8px 8px #888888; }
</style>

<style>
/*required */
.the_anchor {white-space: nowrap}
</style>

<style>
/* Chrome for Android requires this; the script won't work properly without it */
html {overflow: hidden;}
body {position: absolute; left:0; top: 0; right: 0; bottom: 0; margin: 0; overflow-y: auto; -webkit-overflow-scrolling:touch;
}
</style>

<style>
/* Not required */
body {font-family: arial; font-size: 20px; padding: 10%; padding-top: 15px; padding-bottom: 15px; line-height: 30px; }
</style>

<script>

function open_element(which, pos, anchor)
{
var d = document.getElementById(which);
d.style.left='auto';
d.style.marginLeft='auto';
d.style.top='auto';
d.style.marginTop='auto';
d.style.right='auto';
d.style.marginRight='auto';
d.style.bottom='auto';
d.style.marginBottom='auto';
d.style.minWidth='auto';
d.style.transition='0s';

d.style.display='block';

d.style.left=document.getElementById(anchor).offsetLeft -0   +'px';
d.style.top=document.getElementById(anchor).offsetTop  + document.body.lineHeight + 5 + 'px';

if (pos == 'bottom_right')
{
/* deliberately setting wrong position to make transition to correct position transitionable */
d.style.marginTop = '-50px';

if(window.innerWidth - d.offsetLeft - d.offsetWidth -20  > 0)
{
d.style.left=document.getElementById(anchor).offsetLeft -0   +'px';
}
else
{
d.style.left=window.innerWidth - d.offsetWidth - scrollbar_width - 10+ 'px';
}
d.style.marginTop=0;
d.style.transition='margin-top 1s';
}

if (pos == 'bottom_left')
{
/* deliberately setting wrong position to make transition to correct position transitionable */
d.style.marginTop = '-50px';

if(d.offsetLeft - d.offsetWidth> 0)
{
d.style.left=document.getElementById(anchor).offsetLeft - d.offsetWidth + document.getElementById(anchor).offsetWidth + 'px';
}
else
{
d.style.left='10px';
}
d.style.marginTop=0;
d.style.transition='margin-top 1s';
}

if (pos == 'top_right')
{
/* deliberately setting wrong position to make transition to correct position transitionable */
d.style.marginTop= -(d.offsetHeight + document.getElementById(anchor).offsetHeight )  +  50 + 'px';

if(window.innerWidth - d.offsetLeft - d.offsetWidth -20  > 0)
{
d.style.left=document.getElementById(anchor).offsetLeft -0   +'px';
}
else
{
d.style.left=window.innerWidth - d.offsetWidth - scrollbar_width - 10+ 'px';
}
d.style.marginTop= -(d.offsetHeight + document.getElementById(anchor).offsetHeight )  -  5 + 'px';
d.style.transition='margin-top 1s';
if(d.offsetTop < 0)
{
d.style.marginTop=0;
}
d.style.transition='margin-top 1s';

}


if (pos == 'top_left')
{
/* deliberately setting wrong position to make transition to correct position transitionable */
d.style.marginTop= -(d.offsetHeight + document.getElementById(anchor).offsetHeight )  +  50 + 'px';

if(d.offsetLeft - d.offsetWidth> 0)
{
d.style.left=document.getElementById(anchor).offsetLeft - d.offsetWidth + document.getElementById(anchor).offsetWidth + 'px';
}
else
{
d.style.left='10px';
}
d.style.marginTop= -(d.offsetHeight + document.getElementById(anchor).offsetHeight )  -  5 + 'px';
d.style.transition='margin-top 1s';
if(d.offsetTop < 0)
{
d.style.marginTop=0;
}
d.style.transition='margin-top 1s';
}


}

function close_element(which_element)
{/* close an opened element (a div, for instance) */
document.getElementById(which_element).style.display='none';
}

function detect_scrollbar_width()
{/* we must know the width of the window's scrollbar because we don't want 'window.onclick=function(e)' (below) to fire when the scroll bar is clicked on; see https://davidwalsh.name/detect-scrollbar-width   */
var scrollDiv = document.createElement("div");
scrollDiv.style.overflow="scroll";
document.body.appendChild(scrollDiv);
scrollbar_width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
}
window.addEventListener('load', function (){detect_scrollbar_width()}, false);

window.onclick=function(e){
/* close all opened elements when some part of the window outside them is clicked on  */

/* when we click anywhere except on the vertical scrollbar area */
if(e.offsetX<window.innerWidth - scrollbar_width)
{
for (i = 0; i < document.getElementsByClassName("closeable_from_outside").length; i++) 
{
/* if we click anywhere outside elements having class = "closeable_from_outside" and if the clicked part of the document doesn't have class = "the_anchor" (the links to the hidden elements that we want to open and close have this class name)  */
if(!e.target.closest(".closeable_from_outside") && e.target.className!="the_anchor")
{

/* close the elements */

document.getElementsByClassName("closeable_from_outside")[i].style.display='none';
}
}
}
}

/* we don't want to see opened elements at the wrong position when the window is resized, so we close them if this happens  */
var the_width = window.innerWidth;
window.addEventListener('resize', function (){if(window.innerWidth != the_width){location=location}}, false);

</script>


===

IN THE BODY, IMMEDIATELY BEFORE THE CLOSING BODY TAG:
<script>
/* Safari on the iPhone / iPad does not support event delegation for click events, unless the click takes place on a clickable element. So we make the body clickable. 
This must be put at the end of the body section   */
var doc_inner=document.body.innerHTML 
function make_body_clickable()
{
document.body.innerHTML="<div style='width: 100%; height: 100%; ' onclick=function(){}>"+doc_inner+"</div>";
}
window.addEventListener('load', function (){setTimeout('make_body_clickable()',0)}, false);
</script>

===

HTML:
View source.