Show pdf file covering web page

Question

I would like to display a pdf which covers my web page.

I know I can use an iframe/embed element to add the pdf but I don't know how to make it cover the whole page.

I want to have a greyed out area on either side which when clicked will close the pdf.

It should look roughly like this:

This application only needs to work on the latest version of Chrome as this is an internal tool and I would like to use the default chrome pdf viewer.

I am happy to use jquery or another framework.

If someone could point me in the right direction, much appreciated.

Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=Popup+pdf+modal+site:stackoverflow.com)<<<*** and if you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jul 26 '21 at 06:19
Ok, post the fiddle as an answer. Please click `[<>]` snippet editor and create a (sandboxed so not working) [mcve] — mplungjan, Jul 26 '21 at 19:11

score 1 · Answer 1 · edited Jul 26 '21 at 06:22

1

Sorry but i do not have the code for closing the pdf when the gray area is clicked but you can create a x button to close the pdf. Use this code as an example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div data-toggle="modal" data-target="#mypopup">
  <button>Open the PDF</button>
</div>


<div class="modal fade" id="mypopup">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">
        <!--Put your iframe here-->
      </div>
    </div>
  </div>
</div>

edited Jul 26 '21 at 06:22

mplungjan

169,008
28
173
236

answered Jul 26 '21 at 06:14

Pratham

11
4

Note your PDF opens only when the button is clicked. You should also add the bootstrap CDNs. Here are the ones you have to add: and – Pratham Jul 26 '21 at 06:16
It doesn't seem to work: https://jsfiddle.net/qtd8xnfz/. Can you please provide a working code snippet? – trinalbadger587 Jul 26 '21 at 06:19
You can click the `[<>]` snippet editor and post a [mcve]. Please do not post code in comments – mplungjan Jul 26 '21 at 06:19
1

Also why such an old bootstrap? They are on version 5 now – mplungjan Jul 26 '21 at 06:23
I use that one only now because i do not know about the new bootstraps – Pratham Jul 26 '21 at 06:28
trinalbadger587 in the space where i have given Put your iframe here, replace that with what you want to open when the button is clicked like some text or anything else – Pratham Jul 26 '21 at 06:30
https://getbootstrap.com/ – mplungjan Jul 26 '21 at 06:38

score 0 · Accepted Answer · answered Jul 26 '21 at 19:44

Here is an example where I made a class modalTarget for an a element which will allow the pdf to be displayed above the page. Clicking on either side will hide the pdf and the sides are grayed out.

The reason why I decided to go this route was so that you could right-click and click Open in a new tab to open the pdf in a new tab.

Each a element has a unique embed element so if you unclick and reclick it will not have to reload and your position on the pdf will be saved.

I recommend you open the snippet in Full page to be able to see well.

Note: this snippet uses a png as stackoverflow's sandbox does not allow loading of a pdf however I have tested it using a pdf and it works well.

let pdfMap = new Map();
function viewPDF (event)
{
    let a = this;
    if (!pdfMap.has(a))
            pdfMap.set(a, document.body.appendChild(pdfModal.content.firstElementChild.cloneNode(true)));
    let modalDlg = pdfMap.get(a);
    const newSRC = a.href;
    if (newSRC !== modalDlg.querySelector('embed').src)
        modalDlg.querySelector('embed').src = newSRC;
    modalDlg.style.display = '';
    modalDlg.onclick = () => modalDlg.style.display = 'none';
    return false;
}
document.querySelectorAll('.modalTarget').forEach(a => a.onclick = viewPDF);

a.modalTarget::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

<template id=pdfModal>
    <div style="display:none; position: fixed; top: 0; left: 0%; width: 100%; overflow: hidden; z-index: 999999; height: 100%; background-color: rgba(0, 0, 0, 0.5)">
        <embed onclick="event.stopPropagation()" style="position: fixed; top: 0; left: 25%; width:50%; height:100%;" />
    </div>
</template>
<!-- Note: this is a png not a pdf. It works the same for a pdf (eg. https://html.spec.whatwg.org/print.pdf) but the stackoverflow sandbox means that I can't. -->
<a href="https://i.imgur.com/BMDcTrH.png" class=modalTarget>View PDF</a>

Show pdf file covering web page

2 Answers2