Pop up muncul seketika setelah halaman blog kita termuat. Dengan menambahkan Konfigurasi JavaScript CooKie pop up ini hanya muncul sekali dengan rentan waktu yang ditentukan.
Pop Up HTML
<div id="kotak-dialog">
<h3 class="title">Sukai Halaman<a href="#" class="close">×</a></h3>
<div id="iframeContainer">Isi Kode Social Media Anda</div>
</div>
<div id="dialog-overlay"></div>
Pop Up CSS
Untuk CSSnya silahkan berkreasi sendiri dengan memodifikasi style css di bawah ini.#kotak-dialog {
position:absolute;
top:20%;
left:50%;
margin:0px 0px 0px -200px;
max-width:400px;
height:auto;
background-color:#fff;
-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
z-index:1000;
display:none;
}
#kotak-dialog *:focus {
outline:none;
}
#kotak-dialog h3.title {
background-color:#3B5998;
padding:10px 15px;
color:#fff;
font:normal 16px Arial, Sans-Serif;
margin:0px 0px 0px 0px;
position:relative;
}
#kotak-dialog h3.title a {
position:absolute;
top:10px;
right:15px;
color:#fff;
text-decoration:none;
cursor:pointer;
}
#dialog-overlay {
position:fixed !important;
position:absolute;
z-index:999;
top:0px;
right:0px;
bottom:0px;
left:0px;
background-color:#000;
opacity: 0.10;
display:none;
}
Pop Up JavaScript
Simpan kode di bawah ini di atas</body>
var $dialog = $('#kotak-dialog'),
$overlay = $('#dialog-overlay'),
$frame = $('#iframeContainer');
// Check
if (!readCookie('fb_box_once')) {
$(window).load(function () {
$dialog.show();
$overlay.fadeTo(400, 0.8);
return false;
});
}
$dialog.find('.close').click(function () {
// Set
createCookie('fb_box_once', null, 9999);
$dialog.fadeOut('normal', function () {
$frame.remove();
});
$overlay.hide();
return false;
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
DTE:] : http://www.dte.web.id/2012/05/konfigurasi-javascript-cookie.html