matt136 matt136 - 3 months ago 12
CSS Question

Popup Not Center of Screen - CSS Issue

I've adapted some code that I have sourced which shows a popup after X seconds. The JavaScript functionality seems fine, the issue is that whatever I try I am unable to center the popup in the middle of the screen.

Please see the popup here:

http://ts564737-container.zoeysite.com/

I have tried wrapping the popup in another

div
, setting that
div
to
width: 100%
and
position: fixed
then setting the popup container to
margin: 0 auto
, without success.

I have also tried various
display
and
position
properties. What I understand is that the popup container doesn't have anything to be the center of, which is why I tried to wrap it inside another
div
but I'm unable to make this work as I wish.

Please see my code below:

CSS:

#wd1_nlpopup {
display: none;
position: absolute;
margin: 0 auto !important;
top: 200px !important;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}

#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}


HTML:

<div id="wd1_nlpopup" data-expires="30" data-delay="1">
<a href="#closepopup" id="wd1_nlpopup_close">X</a>
<script type="text/javascript" src="https://form.jotformeu.com/jsform/62332622875356"></script>
</div>


JavaScript:

jQuery(document).ready(function(jQuery){
var wd1_nlpopup_expires = jQuery("#wd1_nlpopup").data("expires");
var wd1_nlpopup_delay = jQuery("#wd1_nlpopup").data("delay") * 1000;

jQuery('#wd1_nlpopup_close').on('click', function(e){
jQuery.cookie('wd1_nlpopup', 'closed', { expires: wd1_nlpopup_expires, path: '/' });
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeOut(200);
e.preventDefault();
});

if(jQuery.cookie('wd1_nlpopup') != 'closed' ){
setTimeout(wd1_open_nlpopup, wd1_nlpopup_delay);
}

function wd1_open_nlpopup(){
var topoffset = jQuery(document).scrollTop(),
viewportHeight = jQuery(window).height(),
jQuerypopup = jQuery('#wd1_nlpopup');
var calculatedOffset = (topoffset + (Math.round(viewportHeight/2))) - (Math.round(jQuerypopup.outerHeight()/2));

if(calculatedOffset <= 40){
calculatedOffset = 40;
}

jQuerypopup.css('top', calculatedOffset);
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeIn(500);
}

});



/* jQuery Cookie Plugin v1.3.1 */
(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a);}else{a(jQuery);}}(function(e){var a=/\+/g;function d(g){return g;}function b(g){return decodeURIComponent(g.replace(a," "));}function f(g){if(g.indexOf('"')===0){g=g.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\");}try{return c.json?JSON.parse(g):g;}catch(h){}}var c=e.cookie=function(p,o,u){if(o!==undefined){u=e.extend({},c.defaults,u);if(typeof u.expires==="number"){var q=u.expires,s=u.expires=new Date();s.setDate(s.getDate()+q);}o=c.json?JSON.stringify(o):String(o);return(document.cookie=[c.raw?p:encodeURIComponent(p),"=",c.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join(""));}var g=c.raw?d:b;var r=document.cookie.split("; ");var v=p?undefined:{};for(var n=0,k=r.length;n<k;n++){var m=r[n].split("=");var h=g(m.shift());var j=g(m.join("="));if(p&&p===h){v=f(j);break;}if(!p){v[h]=f(j);}}return v;};c.defaults={};e.removeCookie=function(h,g){if(e.cookie(h)!==undefined){e.cookie(h,"",e.extend(g,{expires:-1}));return true;}return false;};}));


Would anybody please be able to advise on where I'm going wrong with my CSS? Any help is very much appreciated. Thank you for your time.

Answer

Add this css to your #wd1_nlpopup

{
    top: 50%;
    transform: translateY(-50%);
    width: 600px; // add a size for your modal
    left: 0;
    right: 0;
}

The final css:

#wd1_nlpopup {
    display: block;
    position: absolute;
    margin: 0 auto !important;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    width: 600px;
    padding-top: 10px;
    z-index: 9999;
    background: white;
    -webkit-box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #000;
    border-radius: 5px;
    border: 5px solid rgba(0, 0, 0, 0.5);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wd1_nlpopup_close {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    right: 0;
    top: 0;
    position: absolute;
    background-color: #000000;
    color: #ffffff;
    transition: all 0.2s;
    font-size: 18px;
}

#wd1_nlpopup_close:hover {
    background-color: #666666;
    transition: all 0.2s;
    color: #ffffff !important;
    text-decoration: none !important;
}