2

Подскажите пожалуйста как сделать что бы PDF файл открывался не в новом окне браузера а содержание выводилось в модальное окно?

2 ответа 2

5

Вы можете показать PDF в iframe-блоке на этой же странице. Очень удобно и быстро можно сделать это с библиотекой fancybox для jQuery: http://fancyapps.com/fancybox/

Скачиваете библиотеку и подключаете два ее файла:

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

Делаете ссылку на свой PDF-файл:

<a class="fancybox" href="doc.pdf" data-fancybox-type="iframe">просмотр файла</a>

и инициализируете fancybox:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

Пытался сделать рабочий пример на jsfiddle.net, но не получилось. Судя по всему, браузер не хочет открывать pdf в двойном iframe. Сделал простенький самодостаточный пример, который можно сохранить в .html файле и открыть в браузере:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="http://fancyapps.com//fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
</head>
<body>
    <a class="fancybox" data-fancybox-type="iframe" href="https://www.polyu.edu.hk/iaee/files/pdf-sample.pdf">Test pdf</a>
    <script>
        $(".fancybox").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            iframe : {
                preload: false
            }
        });
    </script>
</body>
</html>

Разумеется, внешний вид модального окна можно кастомизировать, убрать/добавить тени, бордеры или скругления углов. Кроме того, что все элементы fancybox'a имеют свои классы, на которые можно навесить стилей, параметры позволяют нам добавить свой класс попап-окну и через него уже присваивать свои стили:

$(".fancybox").fancybox({
    wrapCSS: "styled-fancybox"
})
4
  • пдф не открывает таким образом.
    – Tsyklop
    25 июл 2016 в 13:45
  • @Tsyklop дополнил ответ готовым примером. Попробуйте сохранить приведенный код в .html файле и открыть в браузере. 25 июл 2016 в 13:54
  • Спасибо. заработало. Ещё такой вопрос. а можно ли так сделать с видео? есть на сайте ссылка на ютуб. можно ли это видео в окне воспроизвести?
    – Tsyklop
    25 июл 2016 в 14:07
  • Да, с тем же fancybox это очень легко. На странице fancyapps.com/fancybox найдите раздел "Tips & tricks" (почти в начале), ссылка 14 ведет на рабочий пример с youtube. 25 июл 2016 в 14:10
0

Используйте функцию window.open

Пример:

var newWin = window.open("?PDF=Y", "test", "width=600,height=600");

Подробнее о функции

3
  • он как открывает? в новом окне браузера?
    – Tsyklop
    25 июл 2016 в 13:21
  • Да, как понял из задачи нужно модальное окно — новое модальное окно браузера
    – Mihanik71
    25 июл 2016 в 13:22
  • модальное окно на сайте, не браузера.
    – Tsyklop
    25 июл 2016 в 13:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.