带有 Jquery 的模态 PDF IFRAME [英] Modal PDF IFRAME with Jquery
问题描述
所以这是我的脚本,完美运行,没有问题.现在我为什么要在此处发布此内容,主要是为了增强它并使其变得更好,而且我认为这可以帮助其他人!查询!这是一个工作示例 http://jsfiddle.net/cornelas/4eUgf/2/
So here is my script, works perfectly, no problems. Now why am I posting this on here, mostly so I can enhance it and make it better also i figure this could come to help others! JQUERY! Here is a working sample 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
网站手册
PreviewMinimize |下载And here is my HTML
Site Manual
PreviewMinimize | Download<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>
终于有了 CSS
.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 灰色并且它会显示设置为隐藏的类,那么 div 包含一个加载 PDF 的 Iframe.我认为这是在不更改页面的情况下加载 pdf 的一种非常简单的酷方法.现在.. 百万美元的问题,我该如何做,这样如果有任何一个 pdf 类,它将加载它隐藏的内容.如您所见,我不想疯狂设置课程.我想在 ahref 或我们必须设置一个加载 Iframe 的类的东西.感谢大家的帮助,我会在脚本完成后与任何帮助命名的人一起发布我的脚本,我看到的所有模态都是蹩脚的,而且反应迟钝.
If you notice I wrote this script that it would specifically target class PDF grey and that it would reveal the class which is set to hidden, the div contains a Iframe which loads the PDF. I thought this was a really simple cool way to load a pdf without changing the page. Now.. Million dolla question, how do I make this so that if any has a class of pdf it will load the content it has hidden. I dont want to go crazy on setting up classes as you can see. I figure in the ahref or the something we have to set a class that loads the Iframe. Thanks guys for the help, I will post my script when its complete with anyone who helped name on it, all the modals I have seen are lame and not as responsive.
推荐答案
看这里的例子 http:///jsfiddle.net/cornelas/4eUgf/4/ Iframe 现在基于链接而不是显示加载页面的 iframe 的链接!
See the example here http://jsfiddle.net/cornelas/4eUgf/4/ The Iframe is now based on the link not the link showing the iframe which loads the page!
$(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;
}
这篇关于带有 Jquery 的模态 PDF IFRAME的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!