PDF Lightbox Popup – @tuanphan

Description

open PDF in Lightbox Popup on Click (Text, Button, Image)
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. You can edit a Text, Button or Image then upload PDF file

#1.2. Hover on Page where you use Text/Button/Image > Click Gear icon

Click Advanced > Paste this code

If your plan is Personal/Basic Plan and it doesn’t support Injection, you can see #3.1.

<!-- 06.26c01v15 PDF Lightbox Popup -->
<script>
window.PDFLightboxConfig = {
  overlayColor: "rgba(0,0,0,0.85)",
  popupMaxWidth: "860px",
  popupHeight: "90vh",
  borderRadius: "10px",
  closeIconSize: "40px",
  closeIconColor: "#333",
  closeBgColor: "#ffffff",
  closeTop: "16px",
  closeRight: "16px"
};
</script>
<script src="https://code.beaverhero.com/test/textblock/0626c01v15pdflightboxpopup.js"></script>

#2. Customize

#2.1. To change Overlay Color, change Line 04

overlayColor: "rgba(0,0,0,0.85)",

#2.2. To change close X icon style, change Line 8, 9, 10

closeIconSize: "40px",
closeIconColor: "#333",
closeBgColor: "#ffffff",

#3. Other

#3.1. If you use Personal Plan/Basic Plan and it doesn’t support Injection, you can add a Block under Text/Button/Image

Choose Markdown

Then add this code into Markdown

<script>
window.PDFLightboxConfig = {
  overlayColor: "rgba(0,0,0,0.85)",
  popupMaxWidth: "860px",
  popupHeight: "90vh",
  borderRadius: "10px",
  closeIconSize: "40px",
  closeIconColor: "#333",
  closeBgColor: "#ffffff",
  closeTop: "16px",
  closeRight: "16px"
};
</script>
<script src="https://code.beaverhero.com/test/textblock/0626c01v15pdflightboxpopup.js"></script>