facebook pop up right before the initial landing


I need to have a fb popup for my website which is in .NET.

The site itself should be greyed out when the popup is active.

How to do?  Any tips?

LVL 12
Who is Participating?
leakim971Connect With a Mentor PluritechnicianCommented:
You're looking for a modal lightbox with the facebook style.
Log of plugin is available :

You need to display the dialog before loading all elements of your page so you may wrap all the page in a div for example and hide it by default :

<div style="display:none">
<!-- you page here,inside -->

and put after the lightbox and its overlay after

The last one will produce something like this : http://jsfiddle.net/JrAYm/2/
You may need to customize the CSS again and again...
#facebox {
position: absolute;
top: 50%;
left: 50%;
margin-left: -188px;
margin-top: -87px;
width: 397px;
z-index: 100;
text-align: left;
#facebox .popup {
position: relative;
border: 3px solid rgba(0,0,0,0);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 18px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 18px rgba(0,0,0,0.4);
box-shadow: 0 0 18px rgba(0,0,0,0.4);
#facebox .content {
display: table;
width: 370px;
padding: 10px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
#facebox .close {
position: absolute;
top: 5px;
right: 5px;
padding: 2px;
background: #fff;
#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
.facebox_overlayBG {
background-color: #000;
z-index: 99;

Open in new window

<div id="facebox">       <div class="popup">         <div class="content">
    <p>Hi<br />
        I need to have a fb popup for my website which is in .NET.<br />
        The site itself should be greyed out when the popup is active.<br/>
        How to do?  Any tips?<br />
  </div>         <a href="#" class="close"><img src="http://defunkt.io/facebox/images/closelabel.png" title="close" class="close_image"></a>       </div>     </div>
    <div id="facebox_overlay" class="facebox_hide facebox_overlayBG" style="display: block; opacity: 0.2;"></div>

Open in new window

Facebook has a wide range of functionality available through APIs.  I would suggest you use one of them instead of re-inventing the wheel trying to do something on your own.  Use can use https://developers.facebook.com/ to get the tools you need.  If you do not already have an account you should create one and then work with FB developer tools and APIs.

jazzIIIloveAuthor Commented:
Your answer is somehow political.

I already use open graph. I already integrated fb social share in my site. What i need is a popup. Any best practices?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think what you are talking about is called a modal.  Instead of an actual pop up it is typically a div that hides/greys out everything until some action.  http://jqueryui.com/dialog/#modal-message

<!doctype html>
<html lang="en">
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Modal message</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  $(function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
<div id="dialog-message" title="Facebook Log In">
   Facebook log in code
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.