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

wd1_nlpopup {
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

Answer 2

快速查找!!试试下面的CSS。将此更改为您的CSS，希望它有所帮助

#wd1_nlpopup {        
    margin: 10% 38% !important;
    top: 0px !important;}

Answer 3

将此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;
}

弹出窗口不是中心 - CSS问题

3 个答案: