Auto load pop up Facebook like box

Developer
Ibrahim Jabbari
Size
2,762 Kb
Views
26,312
  1. Auto load pop up Facebook like box Previews
  2. Auto load pop up Facebook like box HTML Codes
  3. Auto load pop up Facebook like box CSS Codes
  4. Auto load pop up Facebook like box JS Codes

How do I make an auto load pop up facebook like box?

By ibrahimjabbari.com. What is a auto load pop up facebook like box? How do you make a auto load pop up facebook like box? This script and codes were developed by Ibrahim Jabbari on 12 August 2022, Friday.

Auto load pop up Facebook like box Previews
IQ Test

Auto load pop up Facebook like box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto load pop up Facebook like box</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="ij-box">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> <a href="http://ibrahimjabbari.com"><strong>Join us</strong></a> and recive updates via Facebook
<a href="#" class="close"><img src="http://ibrahimjabbari.com/english/images/ij-close.png"></a> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FIbrahimJabbariBlog&amp;width=575&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=160446860688696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:575px; height:212px;" allowTransparency="true"></iframe>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 100%; height: 100%; display: none; opacity: 0.8;" id="mask"></div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script> <script src="js/index.js"></script>
</body>
</html>

Auto load pop up Facebook like box - Script Codes CSS Codes

body {
font-family:Arial, Georgia, verdana;
font-size:12px;
}
.close {text-decoration:none; float: right;}
.close:hover {opacity:0.4;}
#mask { position:absolute; left:0; top:0; z-index:9000; background-color:#ded5f0; display:none;
}
#ij-box .window { position:absolute; left:0; top:0; width:570px; height:245px; display:none; z-index:9999; padding:20px; -moz-box-shadow: 0 0 5px 5px #9285ae;
-webkit-box-shadow: 0 0 5px 5px#9285ae;
box-shadow: 0 0 5px 5px #9285ae; text-align:center;
}
#ij-box #dialog { width:570px; height:245px; padding:10px; background-color:#ffffff;
}
/* Read more: Ibrahimjabbari.com

Auto load pop up Facebook like box - Script Codes JS Codes

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {	var id = '#dialog';	//Get the screen height and width	var maskHeight = $(document).height();	var maskWidth = $(window).width();	//Set heigth and width to mask to fill up the whole screen	$('#mask').css({'width':maskWidth,'height':maskHeight});	//transition effect	$('#mask').fadeIn(1000);	$('#mask').fadeTo("slow",0.8);	//Get the window height and width	var winH = $(window).height();	var winW = $(window).width();	//Set the popup window to center	$(id).css('top', winH/2-$(id).height()/2);	$(id).css('left', winW/2-$(id).width()/2);	//transition effect	$(id).fadeIn(2000);	//if close button is clicked	$('.window .close').click(function (e) {	//Cancel the link behavior	e.preventDefault();	$('#mask').hide();	$('.window').hide();	});	//if mask is clicked	$('#mask').click(function () {	$(this).hide();	$('.window').hide();	});
});
Auto load pop up Facebook like box - Script Codes
Auto load pop up Facebook like box - Script Codes
Home Page Home
Developer Ibrahim Jabbari
Username ibrahimjabbari
Uploaded August 12, 2022
Rating 3
Size 2,762 Kb
Views 26,312
Do you need developer help for Auto load pop up Facebook like box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ibrahim Jabbari (ibrahimjabbari) Script Codes
Name
IbrahimJabbari-Effect14
CSS3 Paper Folding Effect
IbrahimJabbari-Effect11
IbrahimJabbari-Effect13
Sample of various effects with CSS3 and Web Fonts
Responsive Menu Using Trunk.js
Responsive Email Subscription Widget for Feedburner
IbrahimJabbari-Effect17
IbrahimJabbari-Effect10
IbrahimJabbari-Effect20
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!