I’ve been able to create most elements on this Popup box, but I find it very difficult to create a dark background Overlay when Popup box is opened. Also to Reposition the Close button to the top-right corner inside the Popup box. And lastly, to tap anywhere outside the Popup box to close Popup. Is there a way to make this happen with CSS?
This is what I’ve been able to do
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #b0b0b0 !important;
}
.txtrmv {
position: absolute !important;
border: none !important;
font-size: 20px !important;
color: white !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
}
</style>
</head>
<body>
<br><br><br><br><br>
<a class="trigger_sb_divi_modal template-pop trigger_template-31291 cboxElement txtrmv"
data-href="#template-31291">[CLICK TO SHOW VIDEO]</a>
<div style="display:none;">
<div class="sb_divi_modal" id="template-31291">
<div class="container-popup">
<div class="video-wrap">
<video src="https://btcscriptsmaker.com/Testvideo1.mp4" controls="" muted="muted"
preload="none" class="image fit" style=
"width: 100%; visibility: visible;"></video>
</div>
</div>
</div>
</div>
<script src="https://btcscript.net/assets/js/jqscript.js" type=
"d9698a347787f66e577c9a00-text/javascript"></script>
<script src=
"https://btcscript.net/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"
data-cf-settings="d9698a347787f66e577c9a00-|49" defer></script>
</body>
</html>