.jpg "Hướng dẫn tạo popup quảng cáo giữa màn hình website, blog")
, các bạn có thể tham khảo:
- Tổng hợp các Code tạo quảng cáo Popup cho Blogspot
- Hướng dẫn tạo cửa sổ Popup ở góc màn hình cho blog, website
- Cách tạo popup like Facebook khi vào Blog, website
- Tạo popup cho website, Blog
Hôm nay share123.vn chia sẻ một code popup nữa là popup quảng cáo giữa màn hình website, blog, một loại popup được sử dụng khá phổ biến trong các site phim, website game.
Code:
<!-- POP UP GIUA MAN HINH -->
<style type='text/css'>
/* Huong dan boi vuvanphong.com */
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 59%;
top: 12%;
font-size: 15px;
}
.reveal-modal h2 {
position: absolute;
top: 5%;
border-radius: 24px;
float: right;
color: #fff;
-webkit-box-shadow: 0px 0px 11px #ccc;
padding-left: 11px;
padding-top: 2px;
padding-bottom: 5px;
padding-right: 11px;
background: #ff6000;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #ff6000;
left: 700px;
}
.reveal-modal a {
text-decoration: none;
font-family: arial;
color: #fff;
text-align: right;
}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:370px;
margin: -200px -200px -200px -600px;
width: 800px;
height: 300px;
background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC5LtmkIzBOWNYqr68i9-H0e-GgljAwlDkVs8v8ybF_Kn5HzTZ3tfETwaGaQwcVZsjBHRQmtrBO3Grk05LGCvKbUZ5v5BMsCona0uh52Jnc2wTB1xQVBy9B8NIb9zBOsDjJSjHMBId04a3/s1600/Banneronline300x120Final-1-940x350.gif) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
</style>
<script src='http://code.jquery.com/jquery-1.6.min.js' type='text/javascript'/>
<script src='https://fileitviet360.googlecode.com/svn/trunk/vuvanphong-popup.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
//Setting Time
TargetDate = "12/25/2013 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
FinishMessage = "";
//Hiding snowfall
$(document).ready(function()
{
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
//Setting cookie
if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
$(document).snowfall('clear');
$(document).snowfall.hide();
$("#myModal").hide();
}
sessionStorage.setItem("Hide-MBT-Popup", 1);
});
$(function() {
// Setting Animation
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: false, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
//Revealing Snowfall
<!-- $(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250}); -->
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<div class='reveal-modal' id='myModal'>
<h2><a href='/' target='_blank'>Xem chi tiết</a></h2>
<script src='https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js' type='text/javascript'/>
<a class='close-reveal-modal'>×</a>
</div>
Chúc bạn thành công 
