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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

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


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.