带有 Jquery 的模态 PDF IFRAME

Question

所以这是我的脚本，完美运行，没有问题。现在为什么我在这里发布这个，主要是为了我可以增强它并让它变得更好，我认为这可以帮助其他人！ 查询！这是一个工作示例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 |下载

<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 的类的东西。谢谢大家的帮助，我会在脚本完成后与任何帮助命名的人一起发布我的脚本，我看到的所有模态都是蹩脚的，而且反应迟钝。

Answer 1

您需要查看提供源 URL 的 .load 函数。您需要做的就是想办法将源代码保存为变量并将其修补到加载函数中。如果您要单击缩略图，则： 然后，每当单击 .pdf 时，首先保存 src： var src=$(this).parent('a').attr('src'); 然后，您可以使用 .load 并使用 src 变量定位 iframe。查看 .load 的 API 文档时应该会很清楚。关于将关闭加载到 iframe 中需要提及的几件事： iframe 用于外部 html 文档，而 object 标签用于外部文件，例如 flash、PDF、video 等。您可能需要查看 object 标签。

iframe 很难设置任何错误处理，因此如果您的 PDF 未加载，显示错误可能会非常困难。有一些解决方法，但我没有看到好的解决方法，它们主要依靠设置计时器来查看 iframe 是否已加载，并且某些站点/pdf 可能需要很长时间才能加载，从而导致错误错误。

由于浏览器需要插件，因此 Pdf 很难使用。没有安装 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;

    }