• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Javascript / Open a jQuery Facebox on page load

Open a jQuery Facebox on page load

I was asked this morning how to go about opening a jQuery Facebox when the page loads; while I normally find dialogs that open in this way somewhat annoying they do have their uses when trying to show some form of disclaimer. This post shows how to do this.

Download Facebox

Download the Facebox plugin and associated files from http://defunkt.io/facebox/ There are a number of examples on that page but here I present a full HTML skeleton for you to start with.

Download jQuery from http://jquery.com/

Working example

View the working example here. This opens a new page and as soon as it’s loaded the jQuery Facebox dialog will be displayed without any user intervention.

The code

Here’s the full HTML and Javascript required to achieve this. Obviously you need to subsitute the Javascript and CSS url locations to where you have these located.

<!DOCTYPE html> 
<html>
<head>
<title>Facebox on load</title>
<link rel="stylesheet" href="/facebox/facebox.css" />
<script src="/js/jquery-1.4.2.min.js"></script>
<script src="/facebox/facebox.js"></script>
<script>
$(document).ready(function() { 
.facebox.settings.opacity = 0.5; 
$.facebox('This will display after the page has finished loading');
});
</script>
 
</head>
<body>
 
</body>
</html>

After the page loads, the dialog will display with the text “This will display after the page has finished loading”.

Getting the content via an Ajax request

To get the content from an Ajax request instead of it being hard coded into the HTML/JS, change this line:

$.facebox('This will display after the page has finished loading');

to this, changing the /path/to/remote.html to the URL of your content:

$.get('/path/to/remote.html', function(html) {
 $.facebox(html);
 })

Check Out These Related posts:

  1. jQuery Facebox Basic Example
  2. jQuery Facebox window with full height with scrollbar
  3. jQuery Facebox dialog with greyed out background
  4. Open a jQuery Facebox dialog programatically

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap