JQuery Lightbox Appearing Blank

I am practising building a single page site where other pages are loaded as jquery light box when a button is clicked. However when I click the button the lightbox effect happens h

Solution 1:

It doesn't look like the project even supports external/internal websites: From the github project

You might want to use something like this: http://www.jacklmoore.com/colorbox/

Solution 2:

You will learn the most by rolling your own lightbox - look how simple it is:

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('This is a lightbox').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});
  
}); //END document.ready

/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

A lightbox is just a regular DIV structure that has been styled position:absolute or position:fixed to remove it from the normal HTML flow. It is then hidden, and displayed when desired upon a button click or other detectable event (mouseover, ajax.done, etc).

Since a lightbox is just a normal div, you can stick new stuff into the lightbox/div on the fly using $('#divID').html('<tag>Your HTML here</tag>') or .append() or .text() etc.

First get your project working with a "lightbox" that is not hidden, then add display:none to the CSS for the lightbox HTML's top container e.g. <div id="lightbox"> in my example code and use the .show() / .hide() etc commands to reveal the lightbox when desired.

To inject an entire website into a lightbox -- as with a div -- add the site in an <iframe>:

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('<iframe src="http://google.com"></iframe>').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});

});//END document.ready

/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

But get it all working visibly, first.