javascript - 弹出窗口不在屏幕中心 - CSS 问题

Question

我已经修改了一些我获取的代码，这些代码在 X 秒后显示一个弹出窗口。 JavaScript 功能似乎很好，问题是无论我尝试什么，我都无法将弹出窗口置于屏幕中间。

请在此处查看弹出窗口:

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

我尝试将弹出窗口包装在另一个 div 中，并将该 div 设置为 width: 100% 和position:fixed 然后将弹出容器设置为 margin: 0 auto，但没有成功。

我还尝试了各种 display 和 position 属性。我的理解是，弹出容器没有任何东西可以作为中心，这就是为什么我尝试将其包装在另一个 div 中，但我无法按照我的意愿进行这项工作。

请参阅下面的代码:

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;};}));

有人可以建议我的 CSS 哪里出了问题吗？很感谢任何形式的帮助。感谢您抽出时间。

Answer 1

将此 CSS 添加到您的 #wd1_nlpopup

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

最终的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;
}