У меня есть модальное окно, содержащее якорный текст. Когда я нажимаю на эту ссылку, она должна вызывать PDF файл, размещенный где-то в другом месте, и отображать его во всплывающем окне. Как я могу это сделать?
Просьба помочь.
У меня есть модальное окно, содержащее якорный текст. Когда я нажимаю на эту ссылку, она должна вызывать PDF файл, размещенный где-то в другом месте, и отображать его во всплывающем окне. Как я могу это сделать?
Просьба помочь.
Вы можете сделать это, используя диалог jQuery UI, вы можете скачать JQuery ui здесь Загрузить JQueryUI
Включите эти скрипты сначала внутри тега <head>
<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>
Код JQuery
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#trigger').click(function(){
$("#dialog").dialog();
});
});
</script>
HTML-код в теге <body>
. Используйте iframe для загрузки PDF файла внутри
<a href="#" id="trigger">this link</a>
<div id="dialog" style="display:none">
<div>
<iframe src="yourpdffile.pdf"></iframe>
</div>
</div>
Вы можете посмотреть эту библиотеку: https://github.com/mozilla/pdf.js он отображает PDF-документ на веб-странице HTML/
Также вы можете использовать Flash для вставки документа на любую HTML-страницу, например:
<object data="your_file.pdf#view=Fit" type="application/pdf" width="100%" height="850">
<p>
It appears your Web browser is not configured to display PDF files. No worries, just <a href="your_file.pdf">click here to download the PDF file.</a>
</p>
</object>
У вас может быть iframe внутри модальной разметки и указать атрибут src как ссылку на ваш pdf. По щелчку ссылки вы можете показать эту модальную разметку.
вы можете использовать iframe в своей модальной форме, поэтому, когда u откройте окно iframe, оно будет открыто внутри вашей модальной формы. я надеюсь, что вы оказываете какой-нибудь PDF-открыватель с некоторым URL-адресом, если у вас есть содержимое в формате pdf, просто добавьте содержимое в div в модальной форме.