jQuery灯箱显示为空白 [英] jQuery Lightbox appearing blank

问题描述

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

I am practising building a single page site where other pages are loaded as jquery light box when a button is clicked.

但是，当我单击按钮时，会发生灯箱效果，但是它是空白的.我尝试加载外部网站(例如google.com)，但该网站还是空白的.这是html页面的代码:

However when I click the button the lightbox effect happens however it is blank. I tried loading an external site such as google.com and that is also blank. This is the code for a html page :

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

这两个都返回空白灯箱.

both of these return blank lightbox.

我在这里使用基本的jQuery灯箱 http://lokeshdhakar.com/projects/lightbox2/可以很好地用于带有图像的画廊.

I was using the basic jQuery lightbox from here http://lokeshdhakar.com/projects/lightbox2/ which works fine for my gallery with images.

推荐答案

通过滚动自己的灯箱，您将学到最多的知识-看起来很简单:

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>

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

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).

由于灯箱只是普通的div，因此您可以使用 $('#divID').html('< tag>;您的HTML此处</tag>')或 .append()或 .text()等.

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.

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

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.

要将整个网站注入灯箱(与div一样)，请将网站添加到< iframe> :

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.

这篇关于jQuery灯箱显示为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！