jQuery 灯箱出现空白

Question

我正在练习构建一个单页网站，当单击按钮时，其他页面会作为 jquery 灯箱加载。

但是，当我单击按钮时，灯箱效果会发生，但它是空白的。我尝试加载外部站点，例如 google.com，但它也是空白的。这是一个html页面的代码：

<li><a href="map.html" data-lightbox="We are here" data-title="We are here"><button class="button location">Location</button></a></li>

对于外部网站：

<li><a href="http://www.rte.ie" data-lightbox="history" data-width="960" data-height="600"><button class="button history">History</button></a></li>

这两个都返回空白灯箱。

我使用的是http://lokeshdhakar.com/projects/lightbox2/ 的基本 jQuery 灯箱，它适用于我的图片库。

Answer 1

看起来该项目甚至不支持外部/内部网站： From the github project

你可能想使用这样的东西： http://www.jacklmoore.com/colorbox/

Answer 2

您将通过滚动自己的灯箱学到最多 - 看看它是多么简单：

/* 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>

灯箱只是一个常规的 DIV 结构，其样式为 position:absolute 或 position:fixed 以将其从正常的 HTML 流中删除。然后它会被隐藏，并在需要时在按钮单击或其他可检测事件（鼠标悬停、ajax.done 等）时显示。

由于灯箱只是一个普通的 div，您可以使用 $('#divID').html('<tag>Your HTML here</tag>') 或 .append() 或 .text() 等将新的东西插入到灯箱/div 即时。

首先让您的项目使用未隐藏的“灯箱”，然后将 display:none 添加到灯箱 HTML 顶部容器的 CSS 例如<div id="lightbox"> 在我的示例代码中 并使用.show() / .hide() 等命令在需要时显示灯箱。

要将整个网站注入到灯箱中（就像使用 div 一样），请将网站添加到 <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>

但首先要让这一切都正常运行。