PDF文件将通过引导程序显示在对话框模式中 [英] PDF file to be displayed on the dialog modal via bootstrap
问题描述
我的要求是，单击按钮，对话框模态应显示pdf文件. 请帮忙！
My requirement is, on click of a button, a pdf file should be displayed on dialog modal. Please Help!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>View PDF</h2>
<!-- Trigger the modal with a button -->
<button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐答案
很抱歉让您失望，但是默认情况下，您不能只在模态中显示pdf.这不是预期的行为.即使使用<iframe>，也无法在自举模态内渲染pdf.同样，在线提供的大多数黑客也不支持跨浏览器.较为理想的方法是使用相同的插件，我将为您提供很少的链接，您可以使用这些链接来实现所需的功能.
Sorry to disappoint you but one cannot just show the pdf inside a modal by default. It is not an intended behavior. Even using <iframe>, you cannot render the pdf inside the bootstrap modal. Also most of the hacks provided online does not support cross-browser. The more ideal way is to use plugins for the same and I will give you the links for few using which you can achieve what you want.
1)结帐PDFObject JS，
<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>
PDFObject将PDF文件嵌入到HTML文档中. 链接.
PDFObject embeds PDF files into HTML documents. Link.
2)用于引导程序的Easy Modal插件. 演示片段和网站
2) Easy Modal Plugin for Bootstrap. Demo Snippet and Website
3)使用jQuery对话框模态弹出窗口. 演示.
3) Using jQuery Dialog Modal Popup Window. Demo.
希望有帮助.
这篇关于PDF文件将通过引导程序显示在对话框模式中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
