所有屏幕的自動調整大小彈出框

Question

我正在為博主使用“電子郵件訂閱”彈出窗口，但是這並沒有明智地調整屏幕寬度。 如何修改，以便自動為所有屏幕設置此電子郵件訂閱彈出框？

代碼如下：

 jQuery(document).ready(function($) { if ($.cookie('popup-email-box') != 'yes') { $('.outer-email-popup-box').delay(10000).fadeIn('medium'); $('.exit-button-subbox, .button').click(function() { $('.outer-email-popup-box').stop().fadeOut('medium'); }); } $.cookie('popup-email-box', 'yes', { path: '/', expires: 5 }); }); 

 .outer-email-popup-box { display: none; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; } .email-popup-box { width: 500px; height: 280px; position: fixed; top: 0; left: 0; right: 0; bottom: 25%; margin: auto; text-align: center; background: #fff; -webkit-animation: swinging 10s ease-in-out 0s infinite; -moz-animation: swinging 10s ease-in-out 0s infinite; animation: swinging 10s ease-in-out 0s infinite; } .email-popup-header { text-align: center; font-size: 2em; color: #FFFFFF; background: #006D90; padding: 4px 15px 7px 10px; margin: 13px 0px 14px 0px; } .email-popup-subheader { text-align: center; font-size: 1.1em; color: #676767; padding: 0px 0px 2px } .email-popup-body { text-align: center; margin-top: 9px; padding: 22px 0px 3px 0px; background: #006D90; } .email-right { background: green; float: right; } .email-left { background: red; float: left; } .email-form { width: 80%; margin: 0 auto; } .in-popup-mail { padding: 10px; margin: 0 auto; width: 270px } .btn-popup-mail { padding: 10px; background: #006D90; border: 2px solid #fff; color: #fff; margin: 0 auto; } .btn-popup-mail:hover { background: #003E52 } .background-img { width: 40px; margin: 0 auto; padding-top: 5px } .exit-button-subbox { float: right; cursor: pointer; position: absolute; right: 0px; top: 0px; margin-top: 4px; margin-right: 4px; } .exit-button-subbox:before { content: "X"; padding: 4px 4px; background: #FFFFFF; color: #000000; font-weight: normal; font-size: 15px; font-family: sans-serif; } .footer-popup-mail { color: #fff; font-size: 12px; margin-top: -5px } .footer-popup-mail a { color: #fff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src='http://aireshalili.github.io/internetsmash/popup-email-subscription.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <div class="outer-email-popup-box"> <div class="email-popup-box internetsmash-swing"> <div class='exit-button-subbox'></div> <div class="background-img"> <img src="http://1.bp.blogspot.com/-1oi5Hycb6mI/VoNMarSCB1I/AAAAAAAABLQ/9eC4C0x7wxo/s89-Ic42/mail.png" style="width:50px" /> </div> <div class="email-popup-header"> SUBCRIBE TO OUR NEWSLETTER </div> <div class="email-popup-header"> <center>Join Today</center> </div> <div class="email-popup-subheader"> Enter Email - Verify Email - Get Updates </div> <div class="email-popup-body"> <div class="email-form"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=540,height=520'); return true" target="popupwindow"> <table width="100%"> <tbody> <tr> <td> <input class="emailu in-popup-mail" name="email" placeholder="Enter your email address" type="text" /> </td> <td> <input class="mail-buttons btn-popup-mail" type="submit" value="SUBMIT" /> </td> </tr> </tbody> </table> <input name="uri" type="hidden" value="FEEDBURNER-ID" /> <input name="loc" type="hidden" value="en_US" /> </form> </div> </div> </div> </div> 

Answer 1

/*Please replce your this code*/ 
   .email-popup-box {
        width: 95%;
        max-width: 500px; /* Auto resize popup box for all screen use max-width*/
        height: 280px;
        position: fixed;
        top: 9%;
        left: 0;
        right: 0;
        bottom: 25%;
        margin: 0 auto;
        text-align: center;
        background: #fff;
        -webkit-animation: swinging 10s ease-in-out 0s infinite;
        -moz-animation: swinging 10s ease-in-out 0s infinite;
        animation: swinging 10s ease-in-out 0s infinite;
        max-width: 500px;
        padding: 0 0;
    }