I downloaded this modal popup script from this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
I want to use it to build a modal popup chat that will be responsive to all mobile devices.
I have set the chat header to 10%, chat footer to 15%.
Please how do I:
1.) set the chat body to ensure that chat messages does not push down the modal footer once the messages exceeds the body may be adding scroll bar in the body since the remaining height percent is 75
2.)it will be responsive on mobile devices
Thanks
Below is what i have done
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* 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; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
height:10%;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
postion:fixed;
height:15%;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div style="width:100%;height:100vh;margin-top:-100px" class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>chat messages goes here</p><br>
<p>chat messages goes here</p>
<br><br><br><br><br><br><br><br><br>
<p>chat messages goes here</p>
<p>chat messages goes here</p>
<br><br><br><br><br><br><br>
</div>
<div style="" class="modal-footer">
Chat: <input type="text" placeholder="Chat Message" class="form-control">
<div>Files Goes Here</div>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
You can set the max height of the modal-body so it won't push the footer and add overflow auto so you can scroll when needed only in the modal-body.
CSS
.modal-body {
padding: 2px 16px;
max-height: 75%; /* 10% header and 15% from footer */
overflow: auto;
}
According to your ideas, if you want auto height div with overflow and scroll when needed, this article will be the solution for you
Related
I need to put several modals for one of my pages.
When the user clicks the button, the modal must be opened and a video is displayed in it.
This code is for placing only one modal on one page.
But I want several modals to work on one page.
And each modal will display its own video.
In this code, how can I create a loop?
Without the use of attributes and IDs.
Please help me how to do this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* 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; /* Enable scroll if needed */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Use importing and exporting in javascript... If use are woking on larger project then you have to use react in it is simple...:)
I am working to create a modal popup. I need to add a slide up animation when the popup is closed. There is an animation when the popup opens but noting when the popup closes.
Here is the codepen on which I am working:
https://codepen.io/ankitkaulmachama/pen/bGGBMeb
Following is my code:
HTML:
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
</div>
CSS :
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999999; /* Sit on top */
padding-top: 10px; /* Location of the box */
left: 10px;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
padding: 0;
border: 1px solid #888;
width: 350px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.9s;
animation-name: animatetop;
animation-duration: 0.9s;
border-radius:5px;
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: #cdcdcd;
float: right;
font-weight: bold;
padding-right:5px;
padding-top:5px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
JAVASCRIPT:
window.onload = function() {
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
function showPopup()
{
modal.style.display = "block";
}
function hidePopup()
{
modal.style.display = "none";
}
}
Any help to accomplish this would be grateful.
I created two CSS classes, one for each state of the modal, and assigned each of them an animation. Also, because you can't animate the display property, I created an animation that hides the modal after the closing animation by moving it very far away from the screen.
window.onload = function() {
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
showPopup();
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
hidePopup();
}
function showPopup()
{
modal.className="modal modal-enabled";
}
function hidePopup()
{
modal.className="modal modal-disabled";
}
function delay(ms){
return new Promise((resolve)=>setTimeout(resolve,ms))
}
async function showPopups(){
for (let i = 0;i<10;i++){
showPopup();
await delay(5000);
hidePopup();
await delay(5000);
}
}
//showPopups();
}
/* The Modal (background) */
.modal {
position: fixed; /* Stay in place */
z-index: 9999999; /* Sit on top */
/* Location of the box */
left: 10px;
top: 10px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
.modal-disabled {
-webkit-animation-name: modalClose;
-webkit-animation-duration: 1s;
animation-name: modalClose;
animation-duration: 1s;
/* If modal disabled (which it is by default), make it invisible using the animation. The animation has a delay so that it fires after the closing animation. You also need to set the position here so it stays there after the animation */
top: -999999px;
}
/* Animation to completely hide the modal parent after the closing animation.
display: block doesnt work here because you can't animate it.
*/
#keyframes modalClose {
0% {
top: 0;
}
99% {
top: 0;
}
100% {
top: -999999px;
}
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
padding: 0;
border: 1px solid #888;
width: 350px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
border-radius:5px;
}
/* Add Animation */
#keyframes animatetop {
0% {
top: -300px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
#keyframes animateclose {
0% {
top: 0;
opacity: 1;
}
100% {
top: -300px;
opacity: 0;
}
}
/* Modal content if modal disabled: Show closing animation */
.modal-disabled .modal-content {
-webkit-animation-name: animateclose;
-webkit-animation-duration: 0.9s;
animation-name: animateclose;
animation-duration: 0.9s;
top: -300px;
}
/* Modal content if modal enabled: Show opening animation */
.modal-enabled .modal-content {
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.9s;
animation-name: animatetop;
animation-duration: 0.9s;
top: 0;
}
/* The Close Button */
.close {
color: #cdcdcd;
float: right;
font-weight: bold;
padding-right:5px;
padding-top:5px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div class="modal modal-disabled" id="myModal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
</div>
I have three buttons(when clicked, the modal shows) with different content inside them (every button has its own content and it's different from the other buttons) and now no matter on which button I click, it shows the same content from the last button I've added. Can anyone explain me how to fix this?
I need this to be done by Monday so quick help would be much appreciated.
<div class="popup1">
<style>
/* 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; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Sponsors</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Our Sponsors</h2>
</div>
<div class="modal-body">
<ul>
<li>MONG</li>
<li>SCNG</li>
<li>Feel Slovenia</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
<div class="popup2">
<style>
/* The Modal (background) */
.modal2 {
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; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content2 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close2 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close2:hover,
.close2:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header2 {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body2 {padding: 2px 16px;}
.modal-footer2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn2">My Gear</button>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header2">
<span class="close2">×</span>
<h2>My gear</h2>
</div>
<div class="modal-body2">
<ul>
<li>Nikon D3100</li>
<li>Sigma 10-20mm f/4</li>
<li>Nikkor 70-300mm f4-5.6</li>
<li>Nikkor 18-55mm f/3.5</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal2");
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
<div class="popup3">
<style>
/* The Modal (background) */
.modal3 {
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; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content3 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close3 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close3:hover,
.close3:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header3 {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body3 {padding: 2px 16px;}
.modal-footer3 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn3">My Hobbies</button>
<!-- The Modal -->
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-header3">
<span class="close3">×</span>
<h2>My hobbies</h2>
</div>
<div class="modal-body3">
<ul>
<li>Photography</li>
<li>Videography</li>
<li>Traveling</li>
<li>Racing</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal3");
// Get the button that opens the modal
var btn = document.getElementById("myBtn3");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
You are using the same variable modal for all three. So this:
var modal = document.getElementById("myModal");
gets overwritten by this
var modal = document.getElementById("myModal2");
which gets overwritten by this
var modal = document.getElementById("myModal3");
By the time the click callback happens, modal is only referring to the 3rd one, so that's the one you end up showing.
The fact that these are in different script tags does not isolate them. You're declaring these variables at the top level of their scripts (as opposed to in a function for example), and so they are global variables.
I have a modal window(popup) that does not fit on the screen height. It opens by pressing a button. The button may be in different part of webpage. Is there a solution to the modal window opened at the top of the screen(for example top: 100px) by pressing a button?
When I use position fixed, the only way to make scrollY on modal window, but it is not the way I want.
<!DOCTYPE html>
<html>
<head>
<style>
/* 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; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
<change location of box>
I am trying to put a modal on a website I am making that has an embedded PDF.
The pdf shows up really small. I did not write this code from scratch. I found it on another site. Can anyone help?
I'm using the Zurb Foundation framework, FYI.
https://jsfiddle.net/8ryeqfbc/
HTML----
<section class="modal">
<div class="wrap row small-up-1 medium-up-1">
<div class="special column"><h3>Modal</h3>
<!-- Trigger/Open The Modal -->
<button id="myBtn">View Full Menu</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<iframe src="pdf.pdf"></iframe>
</div>
</div>
</div>
</div>
</section>
Javascript ---
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
CSS-----
* 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: 500px; /* Full width */
height: 500px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 95%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
Style the iframe to have it fill the modal box.
.modal-content iframe {
height: 100%;
width: 100%;
}