Modal PDF IFRAME with Jquery

Question

这是我的脚本，运行完美，没有问题。现在我为什么要在这里发布这个，主要是为了增强它，让它变得更好，我想这也可以帮助其他人！JQUERY！这是一个工作样品http://jsfiddle.net/cornelas/4eUgf/2/

$(document).ready(function() {
$('.select').click(function () {
$('.pdf_grey').fadeIn('slow');
$('.select').hide();
$('.deselect').show();
});
$('.deselect').click(function() {
$('.pdf_grey').fadeOut('slow');
$('.select').show();
$('.deselect').hide();
});
$('.pdf_grey').css({'opacity' : 0.8});
});
$(document).mouseup(function (e)
{
var container = $(".pdf_grey");
var deselect = $(".deselect");
var select = $(".select");
if (container.has(e.target).length === 0)
{
container.hide();
deselect.hide();
select.show();
}
});

这是我的HTML

现场手册

预览最小化|下载

<div class="pdf_grey">
<span class="deselect top_inf"><h3>Close<h3></span><br>
<iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="Images/pdf/UserMaual.pdf" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
</div>
</div>  
</div>

AND CSS finally

.pdf_grey {
position: absolute;
left: 500px;
top: 100px;
display: none;
padding: 25px;
background: #333;
}
.deselect {
display: none;
cursor: pointer;
}
.select {
cursor: pointer;
color: #666;
}
.select:hover {
color: red;
}

如果你注意到我写的这个脚本，它将专门针对类PDF-gray，并且它将显示设置为隐藏的类，那么div包含一个加载PDF的Iframe。我认为这是一种非常简单、很酷的方式，可以在不更改页面的情况下加载pdf。现在百万美元的问题，我如何做到这一点，如果有一类pdf，它会加载它隐藏的内容。正如你所看到的，我不想疯狂地开设课程。我想在ahref或其他什么中，我们必须设置一个加载Iframe的类。谢谢大家的帮助，当我的剧本完成后，我会和任何帮助命名的人一起发布，我看到的所有模态都很蹩脚，反应也不那么快。

Answer 1

您需要研究为其提供源URL的.load函数。您所需要做的就是找到一种方法，将源保存为变量，并将其修补到load函数中。如果要单击缩略图，请执行以下操作：然后，每当单击.pdf时，首先保存src:var src=$(this)parent('a').attr('src')；然后，您可以使用.load并使用src变量定位iframe。当查看.load的API文档时，应该会非常清楚。关于将offs加载到iframe中，有几点需要注意：Iframes用于外部html文档，而object标记用于外部文件，如flash、PDF、视频等。您可能需要查看object标记。

如果框架很难设置任何错误处理，所以如果你的PDF没有加载，显示错误可能会非常困难。有一些解决方案，但我没有看到任何一个是好的，它们主要依赖于设置计时器来查看iframe是否已加载，并且一些站点/pdfs可能需要很长时间才能加载，从而导致错误。

Pdfs很难使用，因为浏览器需要一个插件。如果用户没有安装PDF阅读器，在这种情况下也无法进行错误检查。

Answer 2

请参阅此处的示例http://jsfiddle.net/cornelas/4eUgf/4/Iframe现在基于链接，而不是显示加载页面的Iframe的链接！

$(document).ready(function() {
$("a.select").live('click', function (e) {
e.preventDefault();
var href = this.href;
$("#manual").attr("src", href);
});
$('.full').css({'opacity' : .7});
$('.select').click(function () {
$('.pdf_grey').fadeIn('slow');
$('.full').fadeIn('slow');
$('.select').hide();
$('.deselect').show();
});
$('.deselect').click(function() {
$('.pdf_grey').fadeOut('slow');
$('.full').fadeOut('slow');
$('.select').show();
$('.deselect').hide();
});
});
$(document).mouseup(function (e)
{
var container = $(".pdf_grey");
var bkg = $(".full");
var deselect = $(".deselect");
var select = $(".select");
if (container.has(e.target).length === 0)
{
container.hide();
deselect.hide();
select.show();
bkg.hide();
}
});

<div class="full">
<div class="pdf_grey">
<span class="deselect top_inf"><h3>Close<h3></span><br>
<iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
</div>
</div>
<div id="wrapper">
<p class="1">
<h3>Site Manual</h3><a href="http://www.ntxmsk.com/pdf/nwpt.pdf#zoom=100" class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a><br>
</p>
<p class="2">
<h3>Site Manual</h3><a href="http://www.ntxmsk.com/pdf/HIPPA.pdf#zoom=100" class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a>
</p>
<div class="topdiv">
</div>    
</div>
body {
padding:0px;
margin: 0px;
}
.full {
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
display: none;
}
.red {
background: red;
width: 10%;
height: 25%;
}
.pdf_grey {
position: absolute;
left: 25%;
top: 15%;
display: none;
padding: 25px;
background: #333;
}
.deselect {
display: none;
cursor: pointer;
}
.select {
cursor: pointer;
color: #666;
}
.select:hover {
color: red;
}