ポップアップ画面の中心ではない - CSSの問題

Question

X秒後にポップアップを表示するソースコードをいくつか修正しました。 JavaScriptの機能はうまくいきますが、私が試してみると画面の中央にポップアップを中央に置くことができないという問題があります。

ここにポップアップを参照してください：私は成功せず、divwidth: 100%にし、position: fixed、その後margin: 0 autoにポップアップコンテナを設定することを設定し、別のdivのポップアップをラップしようとしている

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

。

私はまた、様々な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%; 
    transform: translateY(-50%); 
    width: 600px; // add a size for your modal 
    left: 0; 
    right: 0; 
} 

最終CSSに、この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; 
} 

Answer 2

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 3

ちょっと速い検索で！以下のCSSを試してみてください。 、あなたのCSSに変更し、それが

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