This is my code. The first "open modal" button works, but the 2nd button do not work.
// 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";
}
}
/* 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;}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<button id="myBtn">Open Modal</button>
<!-- Login Modal Box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login to continue</h2>
</div>
<div class="modal-body">
<p>Sorry but, you need to login in order to add this movie into your watchlist. </p>
<p>Some other text...</p>
</div>
</div>
</div>
I think it is because of same id's, but what changes I need to make in the Javascript in order for the code to work?
You cannot use same ID for both buttons. Instead you can use different IDs. But since both buttons serve same purpose, use same class and bind the click function using that class.
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
$('.myBtn').bind('click',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";
}
}
/* 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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button class="myBtn">Open Modal</button>
<button class="myBtn">Open Modal</button>
<!-- Login Modal Box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login to continue</h2>
</div>
<div class="modal-body">
<p>Sorry but, you need to login in order to add this movie into your watchlist. </p>
<p>Some other text...</p>
</div>
</div>
</div>
You should replace an id of buttons by class
<button class="myBtn">Open Modal</button>
<button class="myBtn">Open Modal</button>
and use class selector to bind click event
var btns = document.getElementsByClassName("myBtn");
or using jquery
$('.myBtn').onClick(function(){
modal.style.display = "block";
})
Sorry to say this but you can't or Shouldn't use more than one id in an HTML page. It's wrong to its respective syntax. If want the same name, use class it's ok to use multiple class on a page but not multiple ID.
try using:
<button class="myBtn">Open Modal</button>
<button class="myBtn">Open Modal</button>
and
var btns = document.getElementsByClassName("myBtn");
btn.onclick = function() {
modal.style.display = "block";
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function openModal() {
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";
}
}
/* 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;
}
<!-- Trigger/Open The Modal -->
<button onclick="openModal()">Open Modal</button>
<button onclick="openModal()">Open Modal</button>
<!-- Login Modal Box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login to continue</h2>
</div>
<div class="modal-body">
<p>Sorry but, you need to login in order to add this movie into your watchlist. </p>
<p>Some other text...</p>
</div>
</div>
</div>
Related
I try to make an animation when closing my bottom modal box. In fact I'm trying to reproduce the opposite effect of its opening, it comes out of the bottom of the screen and I would like it to go down in the same way when it closes.
I used this question : CSS Animation when closing modal but it's not quite the same box and I don't know how to use the code.
Here is the code I use :
// 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";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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 */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* 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;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
<h2>Bottom Modal</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>
What I've done in the past to have exit animations is using a timeout. For example, you could do this:
// When the user clicks the button, open the modal
btn.onclick = function() {
//reset the animation
modal.style.animation = "fadeIn 400ms";
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.animation = "fadeIn 400ms reverse";
// Wait for the animation to finish playing, then remove the modal.
setTimeout(() => {
modal.style.display = "none";
}, 400)
}
Note that the timeout is the same length as the animation. I used the animation shorthand CSS property to update the animation properties. Hope this helps.
So the solution I found is to reuse the solution of this post I slightly modified the code and animation to adapt it to my modal box that comes out of the bottom. If it can help some.
// 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.classList.add('show');
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.classList.remove('show');
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.classList.remove('show');
}
}
.modal {
position: fixed;
z-index: 1;
left: 0;
bottom: -50%;
width: 100%;
height: auto;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
opacity: 0;
transition: bottom 0.4s, opacity 0.4s;
}
.modal.show {
bottom: 0;
opacity: 1;
}
.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;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<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>
I have the following code, extracted from this w3Schools tutorial. If you run it, you will see that when the "open model" is clicked, the modal is opened with a CSS animation. It's beautiful and simple. However, when you click the close button, the modal closes suddenly, instead of running a inverse animation. How can I define in CSS a way to make the animation run when closing the modal? Thanks.
// 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";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Body */
.modal-body {padding: 2px 16px;}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* 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}
}
<!-- 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>
Use transition instead of animation, and then toggle a class instead of change the inline style
Note, you might need some update to deal with whether to animate the gray background or not
// 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.classList.add('show');
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.classList.remove('show');
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.classList.remove('show');
}
}
/* The Modal (background) */
.modal {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 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 */
top: -100%;
opacity: 0;
transition: top 0.4s, opacity 0.4s;
}
.modal.show {
top: 0;
opacity: 1;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Body */
.modal-body {padding: 2px 16px;}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* 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);
}
<!-- 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>
I have a problem with CSS styles. I want to set center position of my modal but i can't and i don't know exactly how to make that. Also I don't know how to make smaller modal size.
// 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";
}
}
/* 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;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" id="myBtn" class="image fit" alt="" />
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Header</h2>
</div>
<div class="modal-body">
<br />
<br />
<div class="video-container"><iframe width="100" height="100" src="https://www.youtube.com/embed/LRblJyq_4Ko?rel=0?ecver=1" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
</div>
I want to make always the modal on the center and to be scaled. The bottom can't be longer than screen size.
#Oliwier, Can you please elaborate the question?
My understanding is that from your question and the comment,
is that,
You are looking to reduce the size of the video and want to center it.
// 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";
}
}
/* 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;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.container{
width: 100%;
height: auto;
display: block;
}
.image{
display:block;
margin: auto;
}
<div class ="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" id="myBtn" class="image fit" alt="" /></div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Header</h2>
</div>
<div class="modal-body">
<br />
<br />
<div class="video-container"><iframe width="100" height="100" src="https://www.youtube.com/embed/LRblJyq_4Ko?rel=0?ecver=1" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
</div>
Is this what you are looking for?
I have implemented this CSS-based modal box. It works perfect, and it is quite easy to use.However, it is not responsive. how can we make its responsive?
pls help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal4 {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Modal content1 */
.modal4-content2 {
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;
}
.modal4-header2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal4-body {padding: 2px 16px;}
.modal4-footer2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with header1 and footer1</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn4">Open Modal</button>
<!-- The Modal -->
<div id="myModal4" class="modal4">
<!-- Modal content1 -->
<div class="modal4-content2">
<div class="modal4-header2">
<span class="close">×</span>
<h2>Modal header1</h2>
</div>
<div class="modal4-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal4-footer2">
<h3>Modal footer1</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal4 = document.getElementById('myModal4');
// Get the button that opens the modal
var btn = document.getElementById("myBtn4");
// 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() {
modal4.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal4.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
</html>
Your code is responsive... But if you still didn't get responsiveness then add below meta tag in head:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just started scripting, and I can't figure out how to add a fade out animation (the same one as the fade in animation ) when closing the modal window.
Here is a link to the project: https://jsfiddle.net/myosis/kb0o27vy/
I like everything about it, it only needs a closing animation.
Can someone help me out!?
:)
<!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(255, 255, 255); /* Fallback color */
background-color: rgba(255, 255, 255.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 5.4s;
animation-name: fadeIn;
animation-duration: 5.4s;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 0px;
width: 822px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02),0 6px 20px 0 rgba(0,0,0,0.02);
}
/* 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 {
-webkit-animation-name: fadeOut; /* Fade in the background */
-webkit-animation-duration: 5.4s;
animation-name: fadeOut;
animation-duration: 5.4s
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
color: #5B5B5B;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
}
.modal-body {
width: 538px;
color: #7A7A7A;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
position: relative;
}
.modal-footer {
padding: 2px 16px;
background-color: #ffffff;
color: blac;
}
/* Add Animation */
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#-webkit-keyframes fadeOut {
from {opacity: 1}
to {opacity: 0}
}
</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>
<div class="clearfix grpelem" id="u1562-4"><!-- content -->
<p>test</p>
</div>
</div>
<div class="clearfix colelem" id="u1567-4"><!-- content -->
<p>test</p>
</div>
<div class="colelem" id="u1568"><!-- simple frame --></div>
<div class="clearfix colelem" id="u1566-4"><!-- content -->
<p>test</p>
</div>
<div class="clip_frame colelem" id="u1556"><!-- image -->
<img class="block" id="u1556_img" src="" alt="" width="823" height="1024"/>
</div>
<div class="modal-footer">
<h3>-</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>
If you do not want to use jQuery, here is a quick solution. I have added a setTimeout with the duration time of the CSS and after this timeout, the modal is set to display: none;. Before the setTimeout I have added an animation class to fadeOut the Modal.
// Get the modal
var modal = document.getElementById('myModal');
// Get the overlay
var overlay = document.getElementById('modalOverlay');
// 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.className = modal.className.replace(/ modalClose/g, '');
overlay.className = overlay.className.replace(/ modalClose/g, '');
modal.style.display = "block";
overlay.style.display = "block";
};
overlay.onclick = function() {
modal.className = modal.className + ' modalClose';
overlay.className = overlay.className + ' modalClose';
setTimeout(function() {
modal.style.display = "none";
overlay.style.display = "none";
}, 300);
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.className = modal.className + ' modalClose';
overlay.className = overlay.className + ' modalClose';
setTimeout(function() {
modal.style.display = "none";
overlay.style.display = "none";
}, 300);
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
body, html {
width: 100%;
}
.u1568 {
z-index: 23;
width: 200px;
background-color: transparent;
color: #5B5B5B;
line-height: 36px;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
margin-right: -10000px;
left: 25px;
}
.u1567-4 {
z-index: 31;
width: 200px;
background-color: transparent;
color: #9E9E9E;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: italic;
margin-left: 49px;
margin-top: 9px;
position: relative;
}
#u1568 {
z-index: 35;
width: 538px;
height: 1px;
border-width: 0px;
border-color: transparent;
background-color: #E2E2E2;
margin-left: 49px;
margin-top: 4px;
position: relative;
}
/* The Modal (background) */
#modalOverlay {
position: fixed;
background-color: rgba(0,0,0,0.1);
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
display: none;
z-index: 99;
}
.modal {
display: none;
opacity: 0;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 100;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 50%;
top: 50%;
width: 300px;
height: 300px;
overflow: auto;
margin-left: -150px;
margin-top: -150px;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(255, 255, 255);
/* Fallback color */
background-color: rgba(255, 255, 255.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-name: fadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 0px;
width: 822px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
}
}
/* 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
}
}
.modalClose {
-webkit-animation-name: fadeOut;
/* Fade in the background */
-webkit-animation-duration: .3s;
animation-name: fadeOut;
animation-duration: .3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
/* The Close Button */
.close {
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
color: #5B5B5B;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
}
.modal-body {
width: 538px;
color: #7A7A7A;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
position: relative;
}
.modal-footer {
padding: 2px 16px;
background-color: #ffffff;
color: blac;
}
/* Add Animation */
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1
}
to {
opacity: 0
}
}
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Overlay -->
<div id="modalOverlay"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="clearfix grpelem" id="u1562-4">
<!-- content -->
<p>test</p>
</div>
</div>
<div class="clearfix colelem" id="u1567-4">
<!-- content -->
<p>test</p>
</div>
<div class="colelem" id="u1568">
<!-- simple frame -->
</div>
<div class="clearfix colelem" id="u1566-4">
<!-- content -->
<p>test</p>
</div>
<div class="clip_frame colelem" id="u1556">
<!-- image -->
<img class="block" id="u1556_img" src="" alt="" width="823" height="1024" />
</div>
<div class="modal-footer">
<h3>-</h3>
</div>
</div>
</div>
you can use jQuery to do that
$('#myBtn').click(function(){
$('#myModal').fadeIn(5000);
});
$('.close').click(function(){
$('#myModal').fadeOut(5000);
});
I like using javascript, so I use the setInterval Function.
Once you want it to close, you use:
setInterval(myModal.opacity = myModal.opacity - 0.1, 500);
So it changes the opacity by -0.1 every 0.5 seconds. Of course you can change the 500 to suit your fading speed, or the 0.1 to changes how much the opacity goes down by.