I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up.
I want to replace the image with a button that, when clicked, will open the PDF modal.
What do I need to change?
I'm new to web development. I've been experimenting, even though I don't smoke.
Here's the HTML:
<!-- Trigger the Modal -->
<button id="myBtn">Click Here</button>
<!-- The Modal -->
<div id="myModal" class="modal">
**strong text**<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The PDF) -->
<embed src="sample.pdf" type="application/pdf" width="100%" height="600px" />
<!-- Include buttons or controls here to navigate the PDF -->
</div>
Here's the CSS:
/* Style the Button */
#myBtn {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myBtn:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto;
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Add more styles as needed for buttons, font sizes, colors, etc. */
Here's the JavaScript:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that triggers the modal
var btn = document.getElementById("myBtn");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// Get the close button element and set a function to close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = 'none';
}