Tạo Popup quảng cáo giữa màn hình

<!-- popup giữa -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

<style>
 .popup-product-p {
  font-family:&quot;Roboto&quot;,Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:1em;
  line-height:1.42857143;
  background-color:#ffffff;
  border-radius:4px;
  display:block;
  padding:30px;
  max-height:400px;
  max-width:600px;
  margin:0 auto;
  background-repeat:no-repeat;
  background-size:cover;
}

.popup-product-p .popup-product-p-image {
  width:224px;
  height:auto;
  border:1px solid #e1e1e1;
  display:inline-block;
  max-height:338px;
  max-width:214px;
  overflow:hidden;
}

.popup-product-p .popup-product-p-image .biz-image-asset {
  width:100%;
  display:block;
}

.popup-product-p .popup-product-p-content {
  display:inline-block;
  height:auto;
  padding-left:35px;
  vertical-align:top;
  text-align:left;
}

.popup-product-p .popup-product-p-content .biz-special {
  padding:0;
  display:block;
}

.popup-product-p .popup-product-p-content .biz-special h4 {
  font-size:24px;
  font-weight:300;
  margin:0;
  color:#7d7d7d;
}

.popup-product-p .popup-product-p-content .biz-special p {
  font-size:18px;
  color:#464646;
  margin:0;
}

.popup-product-p .popup-product-p-content .biz-special p.biz-discounts {
  margin:5px 0 0;
}

.popup-product-p .popup-product-p-content .biz-special p span {
  color:#000;
  font-weight:bold;
  font-size:50px;
}

.popup-product-p .popup-product-p-content .biz-subscribe-right {
  padding:0;
  display:block;
  margin-top:20px;
  font-weight:300;
}

.popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases span {
  font-size:18px;
  color:#7d7d7d;
}

.popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-price {
  font-size:18px;
  color:#464646;
  text-decoration:line-through;
  font-weight:normal;
}

.popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-regular-price {
  display:block;
  margin-bottom:5px;
}

.popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-special-price {
  font-size:22px;
  color:#f15b4e;
  font-weight:bold;
}

.popup-product-p .popup-product-p-content .biz-btn {
  display:block;
  margin-top:20px;
}

.popup-product-p .popup-product-p-content .biz-btn a {
  background:#000;
  color:#fff;
  display:inline-block;
  font-size:22px;
  font-weight:500;
  padding:11px 46px;
  text-decoration:none;
}

.popup-product-p .clear-both {
  clear:both;
  height:0;
}

.popup-product-p p {
  padding:0;
  margin:0;
}

@media (max-width:640px) {
  #boxview {
    left:5% !important;
  }
  .popup-product-p {
    width:100%;
    height:auto;
    padding:20px;
  }
  .popup-product-p .popup-product-p-image {
    width:30%;
    height:auto;
  }
  .popup-product-p .popup-product-p-content {
    padding-left:25px;
  }
  .popup-product-p .popup-product-p-content .biz-special h4 {
    font-size:20px;
  }
  .popup-product-p .popup-product-p-content .biz-special p {
    font-size:14px;
  }
  .popup-product-p .popup-product-p-content .biz-special p span {
    font-size:40px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right {
    margin-top:16px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases span {
    font-size:14px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-price {
    font-size:14px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-special-price {
    font-size:18px;
  }
  .popup-product-p .popup-product-p-content .biz-btn {
    margin-top:16px;
  }
  .popup-product-p .popup-product-p-content .biz-btn a {
    font-size:18px;
    padding:5px 40px;
  }
}

@media (max-width:480px) {
  #boxview {
    max-width:330px !important;
  }
  .popup-product-p {
    width:100%;
    height:auto;
    padding:10px;
  }
  .popup-product-p .popup-product-p-image {
    width:100px;
    display:block;
    margin:0 auto;
  }
  .popup-product-p .popup-product-p-content {
    padding-left:0;
    padding-top:15px;
    display:block;
    margin:0 auto;
  }
  .popup-product-p .popup-product-p-content .biz-special h4 {
    font-size:16px;
  }
  .popup-product-p .popup-product-p-content .biz-special p {
    font-size:10px;
  }
  .popup-product-p .popup-product-p-content .biz-special p.biz-discounts {
    margin:0;
  }
  .popup-product-p .popup-product-p-content .biz-special p span {
    font-size:30px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right {
    margin-top:12px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases span {
    font-size:10px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-price {
    font-size:10px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-regular-price {
    margin-bottom:0;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-special-price {
    font-size:14px;
  }
  .popup-product-p .popup-product-p-content .biz-btn {
    margin-top:12px;
  }
  .popup-product-p .popup-product-p-content .biz-btn a {
    font-size:14px;
    padding:5px 40px;
  }
}

@media (min-width:481px) and (max-height:400px) {
  .popup-product-p {
    width:100%;
    height:auto;
    padding:10px;
  }
  .popup-product-p .popup-product-p-image {
    width:100px;
    display:block;
    margin:0 auto;
  }
  .popup-product-p .popup-product-p-content {
    padding-left:0;
    padding-top:15px;
    display:block;
    margin:0 auto;
  }
  .popup-product-p .popup-product-p-content .biz-special h4 {
    font-size:16px;
  }
  .popup-product-p .popup-product-p-content .biz-special p {
    font-size:10px;
  }
  .popup-product-p .popup-product-p-content .biz-special p.biz-discounts {
    margin:0;
  }
  .popup-product-p .popup-product-p-content .biz-special p span {
    font-size:30px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right {
    margin-top:12px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases span {
    font-size:10px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-price {
    font-size:10px;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-regular-price {
    margin-bottom:0;
  }
  .popup-product-p .popup-product-p-content .biz-subscribe-right .biz-purchases .biz-special-price {
    font-size:14px;
  }
  .popup-product-p .popup-product-p-content .biz-btn {
    margin-top:12px;
  }
  .popup-product-p .popup-product-p-content .biz-btn a {
    font-size:14px;
    padding:5px 40px;
  }
}

#qc-popup {
  display:none;
  background:rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
}

#boxclose {
  width:100%;
  height:100%;
  -webkit-transform:translateZ(0);
}

#boxview {
  max-width:600px;
  position:absolute;
  top:20%;
  left:28%;
}

#closebox {
  float:right;
  cursor:pointer;
  position:absolute;
  right:-10px;
  top:-10px;
  z-index:99999;
}

#closebox:before {
  font-family:FontAwesome;
  content:&quot;\f00d&quot;;
  padding:5px 7px;
  background:#000;
  color:#ffffff;
  font-weight:normal;
  font-size:14px;
  border:2px solid #fff;
  border-radius:50%;
  -webkit-box-shadow:-3px 3px 9px -1px rgba(0,0,0,0.75);
  -moz-box-shadow:-3px 3px 9px -1px rgba(0,0,0,0.75);
  box-shadow:-3px 3px 9px -1px rgba(0,0,0,0.75);
}

#boxlink,
#boxlink a.visited,
#boxlink a,
#boxlink a:hover {
  color:#aaaaaa;
  font-size:9px;
  text-decoration:none;
  text-align:center;
  padding:5px;
}

#qc-box {
  max-width:600px;
}

#qc-box img {
  width:100%;
}

</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){if($.cookie(&#39;popup_facebook_box&#39;)!=&#39;yes&#39;){$(&#39;#qc-popup&#39;).delay(2500).fadeIn(&#39;fast&#39;);$(&#39;#closebox, #boxclose&#39;).click(function(){$(&#39;#qc-popup&#39;).stop().fadeOut(&#39;fast&#39;);});}});
</script>
<div id='qc-popup'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div class='popup-product-p'>
        <div class='popup-product-p-image'><img src='http://sv1.upsieutoc.com/2017/12/18/tai-xung.jpg' style='width: 100%; float: none;'/>
            
        </div>
        <div class='popup-product-p-content'>
            <div class='biz-special'>
                <h4>MỪNG GIÁNG SINH</h4>
                <h4>BBNHATRANG.COM</h4>
                <h2><span><b>Tặng ngay 500.000đ</b></span></h2>
                <p>cho sản phẩm Passport AT&amp;T</p>
            </div>
            <div class='biz-subscribe-right'>
                <div class='biz-order-now'>
                    <p class='biz-purchases'>
                        <span class='biz-regular-price'>Giá niêm yết: <span class='biz-price'>3.490.000đ</span> </span>
                        <span>Giá khuyến mãi: <span class='biz-special-price'>2.990.000đ</span></span>
                    </p>
                    <div class='biz-btn'>
                        <a href='http://www.bbnhatrang.com/2017/09/blackberry-passport-at-nobox-likenew-99.html' target='_blank'>                            Mua ngay                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- End popup giữa -->

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh