Hey there! I was able to create a popup on my screen but it's currently positioned in the center of the page instead of the screen itself.
Is there a way for me to make sure it appears in the center of the screen and not just the page?
I'm using a dual-screen setup but viewing the page in a single view mode.
CSS /STYLES FOR CSS POPUP/
#blanket {
background-color: #111;
opacity: 0.60;
*background: none;
position: absolute;
z-index: 9001;
top: 0px;
left: 0px;
width: 100%;
}
#popUpDiv {
position: absolute;
background-color: #dddddd;
opacity: 0.90;
width: 400px;
height: 300px;
border: 5px solid #000;
z-index: 9002;
border: 2px solid #a1a1a1;
border-radius: 10px;
-webkit-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
}
</style>
Javascript
<script>
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') { el.style.display = 'block'; }
else { el.style.display = 'none'; }
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
// More code here
}
</script>
Part of HTML
<div id="popUpDiv" style="display: none;">
<div style="float: right; text-align: right;">
<center><p style="color:black;z-index: 9003!important; font-size: x-large;"> <b>Price Change</b> </center>
// More HTML code here
</div>
</div>
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
<!-- / POPUP-->
<!-- end #mainContent -->
</div>
Thank you!