Question

我正在为博主使用电子邮件订阅弹出窗口，但这并不是明智地调整屏幕宽度。如何修改以便为所有屏幕自动设置此电子邮件订阅弹出框？

代码如下：

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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

自动调整所有屏幕的大小弹出框

1 个答案: