I have problem with popup in my divi page.
I created popup then implemented same in my home page but my popup disappear then i scroll down for example:
Like you see my popup are after img. And this is not looking good right, i wanna fix it.
my code:
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
left: 5px;
width: 280px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: #f2835a;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="open-button"
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>Patalpų dezinfekcija beta</h1>
<h4>Patalpų dezinfekcija beta - 70ct/kv.m </h4>
<h4>tel. +54645654656 <br>
el. p. 45646#45645654.com </h4>
<button type="button" class="btn cancel" onclick="closeForm()">Uždaryti</button>
</form>
</div>
</div>
</body>
</html>
I cant found solution on my own. Please any info how to solve this issue will be very nice.
Actually i dont understand what you are trying to say. So please use
below CSS and HTML for your reference. There you can edit the modal as
per your requirement.
/* 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*** Html part ***/
<body>
<!-- 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>
<p>Some text in the Modal..</p>
</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>
Related
I am trying to understand how to make my current 'modal' code allow for a minimize and maximize button where the modal would minimize to the bottom of the screen when clicking the - button and in the little rectangle at the bottom allow for clicking the + button to bring it back.
Basically I want it to work the same as a browser where you minimize things to the bottom of the desktop, but in this case our application.
HTML
<button id="phq_btn" ng-click="openModalBtn('phq_modal','modal-overlay')">PHQ Open Modal</button>
<div id="modal-overlay">
<!--PHQ Modal-->
<div id="phq_modal" class="modal">
<!-- PHQ Modal content -->
<div class="modal-content">
<!--Allow Scroll-->
<div class="modal-scroll">
<!--Allow Dragging of Header-->
<div class="modal-header">
<div layout ="row" class="titleHolder" style ="height: 25px; width: 100%" >
<div layout="column" flex="33">PHQ-9</div>
<div layout="column" style="color: rgb(255, 255, 255)" layout-align="end end" flex="100"><span ng-click="closeModalBtn('phq_modal','modal-overlay')" style="margin-bottom:7px" class="close">×</span></div>
</div>
</div>
CONTENT GOES HERE.
</div>
</div>
</div>
</div>
CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
z-index: 999;
/*
background-color: rgb(0,0,0); /* Fallback color
background-color: rgba(0,0,0,0.4); /* Black w/ opacity
*/
}
/* Modal Content/Box */
.modal-content {
padding: 10px;
background-color: #fefefe;
margin: 5% auto; /* 15% from the top and centered */
border: 1px solid #888;
border-radius: 10px;
height: 70%;
width: 80%; /* Could be more or less, depending on screen size */
pointer-events:all;
z-index: 999;
}
/* Modal Scroll Content*/
.modal-scroll {
overflow-y: scroll !important;
background-color: #fefefe;
height: 100%;
width: 100%;
pointer-events:all;
}
.modal-header{
cursor: pointer;
}
/* The Close Button */
.close {
color: #f7f3f3;
float: right;
font-size: 28px;
font-weight: 600;
cursor: pointer;
height: 15px;
width: 20px;
text-align: right;
pointer-events:all;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
.modal-overlay-on {
z-index: 1000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
opacity: 1;
pointer-events: none;
cursor: default;
}
JS
//Open Modal
$scope.openModalBtn = function(modal,overlay){
eval(modal + '.style.display = "block"');
eval("$('#" + overlay + "').addClass('modal-overlay-on')");
};
//Close Modal
$scope.closeModalBtn = function(modal,overlay){
eval(modal + '.style.display = "none"');
eval("$('#" + overlay + "').removeClass('modal-overlay-on')");
};
//Drag Modal
$(".modal").draggable({
handle: ".modal-header"
});
//Disable Click outside of Modal
window.onclick = function(event) {
if (event.target == phq_modal) {
phq_modal.style.display = "none";
}
};
I'm trying to make a grid of photos that when hovered over display a button that can be used to open a modal. After successfully getting one photo to function this way, I tried to start introducing more photos, but now I can't open the modal from the first button any more.
Here's the code I'm using so far for reference:
</style>
</head>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 1</h3>
<p>Modal Text 1
</p>
</div>
</div>
<div class="container">
<img src="https://previews.dropbox.com/p/thumb/ABFh1yeARivImN6pNH7kuatn60gVuTBKQO9dbkUPSa2nQQWvlgOMt4GIkI5ZlWvHDV1jhXJQ1JqmPPSRwqdwDZ360SPlxnHG7as4GypQWPvCGa0_IiZ8MY-dxF3qQ3azldvGF3P3pFUVOe5oi0pL4cTQiLbj4wqyX7f-SSYaVwD88sU8B-avSdROijI0_3zOecUEfMl9Hrx3uWviDREGperqRhJ7-YaB1VM-LRPh5ESKN92YeEdpM41tIIUL-CAbzcffQYNncc-XUi8TMpOdLL2lvH_s6W1kH70H4PuEt8b0fn5I6oAg8ami7_6GJSK4nPUYxWbrbqiAgrmv2U-7aYeWhtkiRf0l8JDGoP9BVblqcg/p.jpeg?fv_content=true&size_mode=5" alt="Fiona Garufi" style="width:100%">
<button1 id="myBtn1" class="btn">Button Text 1</button>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2-->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 2</h3>
<p>Modal Text 2
</p>
</div>
</div>
<div class="container">
<img src="https://previews.dropbox.com/p/thumb/ABFh1yeARivImN6pNH7kuatn60gVuTBKQO9dbkUPSa2nQQWvlgOMt4GIkI5ZlWvHDV1jhXJQ1JqmPPSRwqdwDZ360SPlxnHG7as4GypQWPvCGa0_IiZ8MY-dxF3qQ3azldvGF3P3pFUVOe5oi0pL4cTQiLbj4wqyX7f-SSYaVwD88sU8B-avSdROijI0_3zOecUEfMl9Hrx3uWviDREGperqRhJ7-YaB1VM-LRPh5ESKN92YeEdpM41tIIUL-CAbzcffQYNncc-XUi8TMpOdLL2lvH_s6W1kH70H4PuEt8b0fn5I6oAg8ami7_6GJSK4nPUYxWbrbqiAgrmv2U-7aYeWhtkiRf0l8JDGoP9BVblqcg/p.jpeg?fv_content=true&size_mode=5" alt="Fiona Garufi" style="width:100%">
<button1 id="myBtn2" class="btn">Button Text 2</button>
</div>
</div>
</div>
<script>
// Get the first modal
var modal = document.getElementById("myModal1");
// Get the first button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the second modal
var modal = document.getElementById("myModal2");
// Get the second button that opens the modal
var btn = document.getElementById("myBtn2");
// 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>
<html>
<head>
<style>
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #673589;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
width: 100%;
max-width: 400px;
transition: .4s ease;
}
.container img {
width: 100%;
height: auto;
opacity: 1;
}
.btn {
position: absolute;
top: 70%;
left: 50%;
transition: .4s ease;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgba(235,235,235,.5);
opacity: 0;
color: #351B47;
font-size: 20px;
font-family: "Raleway";
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
id: "myBtn";
}
.container:hover .btn{
opacity: 1;
}
.container:hover {
opacity: .75;
}
opacity: 1;
}
Since your using the id in your javascript your only binding the modal only once in the DOM, change it to use the class name instead, I would also recommend improving your CSS
// Get the button that opens the modal
var btn = document.querySelectorAll("button.btn");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #673589;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
width: 100%;
max-width: 400px;
transition: .4s ease;
}
.container img {
width: 100%;
height: auto;
opacity: 1;
}
.btn {
position: absolute;
top: 70%;
left: 50%;
transition: .4s ease;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgba(235,235,235,.5);
opacity: 0;
color: #351B47;
font-size: 20px;
font-family: "Raleway";
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
id: "myBtn";
}
.container:hover .btn{
opacity: 1;
}
.container:hover {
opacity: .75;
}
opacity: 1;
}
<html>
<head>
</head>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 1</h3>
<p>Modal Text 1
</p>
</div>
</div>
<div class="container">
<img src="https://via.placeholder.com/150" alt="Fiona Garufi" style="width:100%">
<button href="#myModal1" id="myBtn1" class="btn">Button Text 1</button>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2-->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 2</h3>
<p>Modal Text 2
</p>
</div>
</div>
<div class="container">
<img src="https://via.placeholder.com/150" alt="Fiona Garufi" style="width:100%">
<button href="#myModal2" id="myBtn2" class="btn">Button Text 2</button>
</div>
</div>
</div>
</body>
</html>
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 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">
Trying to create a page with multiple pictures, as you click on each it zooms in using a modal. This code worked great for 1 picture, but as I added several more, only the first works. Please advise.
// Zoom in Affect
// Get the modal
var modal = document.getElementById('myModal'); <!-- ? -->
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg'); <!-- ? -->
var modalImg = document.getElementById("img"); <!-- ? -->
var captionText = document.getElementById("caption"); <!-- ? -->
img.onclick = function(){ <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; <!-- ? -->
modalImg.src = this.src; <!-- ? -->
modalImg.alt = this.alt; <!-- ? -->
captionText.innerHTML = this.alt; <!-- ? -->
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
#myImg {
cursor: pointer;
transition: 0.3s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 3px solid #7DAFE7;
}
#myImg:hover {
opacity: 0.7; /* How much image changes when moving mouse over it */
border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
display: none; /* ? */ /* Hidden by default */
position: fixed; /* ? */ /* Stay in place */
z-index: 1; /* ? */ /* Sit on top */
padding-top: 100px; /* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; /* Width of picture inside modal? */
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
width: 100%;
/*background-color: #0200FF;*/
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
position: relative;
}
.imgPicture {
width: 90%;
}
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
You need to attach an event listener to each of the elements, since there are multiple instances. Also, it's good practice to use classes instead of IDs when creating multiple instances of an element (unless, as #mmm suggests, they are unique).
// Zoom in Affect
// Get the modal
var modal = document.getElementById('myModal'); <!-- ? -->
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('imgPicture'); <!-- ? -->
var modalImg = document.getElementById("img"); <!-- ? -->
var captionText = document.getElementById("caption"); <!-- ? -->
for (var i=0; i<img.length; i++) {
img[i].addEventListener('click', function(){ <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; <!-- ? -->
modalImg.src = this.src; <!-- ? -->
modalImg.alt = this.alt; <!-- ? -->
captionText.innerHTML = this.alt; <!-- ? -->
});
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
#myImg {
cursor: pointer;
transition: 0.3s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 3px solid #7DAFE7;
}
#myImg:hover {
opacity: 0.7; /* How much image changes when moving mouse over it */
border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
display: none; /* ? */ /* Hidden by default */
position: fixed; /* ? */ /* Stay in place */
z-index: 1; /* ? */ /* Sit on top */
padding-top: 100px; /* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; /* Width of picture inside modal? */
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
width: 100%;
/*background-color: #0200FF;*/
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
position: relative;
}
.imgPicture {
width: 90%;
}
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>