javascript - What's an easy way to show a popover based on if / if else statements?

Question

I'm using the javascript on my site seen on the link below. It determines if the user 1. has already allowed our Facebook app and is logged in, 2. hasn't allowed our application but is logged in to Facebook, or 3. isn't logged in to Facebook.

I want a popup to show up over some of my site's content (maybe 600px by 400px or something) so it acts as a content blocker of sorts and tells them they need to log in. The popup would then go away after they've allowed the application.

My problem is this. How do I code the popup inside the else if and if statements? I can do simple things like document.write (as seen in my code), but how do I show a popup over my content? Is there a way I can easily reference other html and javascript from within these statements? I even tried using a layer but instead of layering it over my content, it shows the layer as a new page without showing the page's content.

My goal here is to have a popup show up over the content just enough so the user can see that there is indeed content behind it so they're more easily convinced to allow the app so they can see it all.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
  document.write("<h1>Looks like you're logged into Facebook and our app :)</h1>  ");
    // the user is logged in and connected to your
    // app, and response.authResponse supplies
    // the user’s ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
  document.write("<h1>Logged in but haven't allowed our app</h1>  ");
    // the user is logged in to Facebook, 
    //but not connected to the app
  } else {
  document.write("<h1>Not logged in</h1>");
    // the user isn't even logged in to Facebook.
  }
});

http://pastebin.com/J882yh5F

Answer 1

You can do this easily with just CSS. Create a div at body level, and set to position: absolute and width and height 100% and another inner div as the alert message with your own dimensions. Then you can show or hide the custom message with a simple display: none or display: block from JavaScript.

Demo: http://codepen.io/elclanrs/full/rGoha