JSFiddle - React, Tailwind, and code Playground

by Muhammad Ishtiaq

HTML

<div id="fbpopupdata">
<h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="www.myblogger-tricks.com" rel="nofollow"
 >Get Widget</a></h1>
<div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/mybloggerstricks&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.myblogger-tricks.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div>

CSS

/*css for fbpopup*/

#fbpopupdata {
    background-color: none;
    position:absolute;
    z-index: 9999;
    display: none;
    padding: 0;
    border: 10px solid #446c95;
    -webkit-background-clip: padding-box;
 /* for Safari */
    background-clip: padding-box;
 /* for IE9+, Firefox 4+, Opera, Chrome */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 420px;
    height: 300;
    overflow: auto;
    left:50% !important;
    margin-left:-220px;
    margin-top:auto;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
} 

#fbpopupdata span {
    font-size: 12px !important;
    font-weight: normal !important;
} 

#fbpopupdata h1 {
    background: #446c95 url(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
    border: 0px solid #3b5998 !important;
    color: #FFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px !important;
    margin: 0 0 10px 0  !important;
    font-family: arial !important;
    overflow: hidden !important;
} 

.fbpopupdatadata {
    font-size: 12px !important;
    font-weight: normal !important;
    height: 275px !important;
    padding: 1px !important;
    background: #fff !important;
    border-bottom: 0px solid #ddd;
    overflow: show !important;
} 

#fbpopupdatafooter {
    text-align: right;
    font-size:12px;
    background: #F2F2F2 !important;
    height: auto !important;
    padding: 10px !important;
    overflow: hidden !important;
} 

#fbpopupdatafooter p {
    text-align: right;
    font-size:12px;
} 

#fbpopupdataclose {
    float: right;
    background-color: #446c95 !important;
    border: 0px solid #ccc !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 5px 35px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: arial !important;
    outline: none...

JavaScript

jQuery(document).ready(function() {
function fbpopupdatafunc()  {
var sec = 60
var timer = setInterval(function() {
$("#fbpopupdatafooter span").text(sec--);
if (sec == 0) {
$("#fbpopupdata").fadeOut("slow");
clearInterval(timer);
}
},1000);
var fbpopupdatawindow = jQuery(window).height();
var fbpopupdatadiv = jQuery("#fbpopupdata").height();
var fbpopupdatatop = jQuery(window).scrollTop()+50;
jQuery("#fbpopupdata").css({"top":fbpopupdatatop});}
jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc)
//alert(jQuery.cookie('sreqshown'));
//var fbpopupdataww = jQuery(window).width();
//var fbpopupdatawww = jQuery("#fbpopupdata").width();
//var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2;
var fbpopupdataleft = 500;
//var fbpopupdatawindow = jQuery(window).height();
//var fbpopupdatadiv = jQuery("#fbpopupdata").height();
//var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2;
jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left:  fbpopupdataleft}, 0).show();
jQuery("#fbpopupdataclose").click(function() {
jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});});