Develop Reference

Adding modal to my page. How to make full block not to only <section> how add modal with stylise <div> and <span>

i'm new here, i begginer and i have problem with my project.
I used template "Landed" https://html5up.net/landed - i modyfing it, and i have problem with adding a functionality: full size modal for images.
I just need to make full size modal after clicking image.
It would be nice if also images were cropped to same size, and user click to it to see full picture.
I need it for showing my graphic portfolio.
I tried to add this code by #snowMonkey
https://jsfiddle.net/snowMonkey/f1zav0ge/
I asked my friends, but they dont know what to do.
I tired many ways (changing in javaScript, and messing with classes), but i cannot achive what i want.
It works without styling <div class="col-4 col-6-xsmall"><span class="image fit"> but shadow makes from to end page - i need shadow to full page.
if i add to code this styling i see just black after choosing image, or sometimes "undefined".
Could someone help me?
Thanks.
Codes
HTML:
<section>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
</div>
</section>
<!--
<section>
<img class="myImages" id="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
<img class="myImages" id="myImg" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
<img class="myImages" id="myImg" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
-->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
CSS:
/* modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
overflow-y: none;
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.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
/*koniec*/
/* Image */
.image {
border-radius: 4px;
border: 0;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
}
.image:hover {opacity: 0.7;}
.image:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
/*background-image: url("images/overlay.png");*/
width: 100%;
height: 100%;
z-index: 1;
}
.image img {
border-radius: 4px;
display: block;
}
.image.left {
float: left;
margin: 0 1.5em 1em 0;
top: 0.25em;
}
.image.right {
float: right;
margin: 0 0 1em 1.5em;
top: 0.25em;
}
.image.left, .image.right {
max-width: 40%;
}
.image.left img, .image.right img {
width: 100%;
}
.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}
.image.fit img {
width: 100%;
}
.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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
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;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
JS:
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('col-4 col-6-xsmall');
// the image in the modal
var modalImg = document.getElementById("image fit");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}

Need help organizing multiple containers, buttons, and modals

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>

HTML : Modal should open without me clicking on it

I'm looking for a functionality where, on arriving at page, the animation of modal window popping occurs without the button actually being pressed :
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 10%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* 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 */
padding-top: 60px;
text-align : centre
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body style = "background-color : blue">
<h2 style = "text-align: center;">Let's Start</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto; -webkit-box-align: center; ">Describe</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
Name       :
<input type="text" name="name" placeholder="Enter name"><br>
Age         :
<input type="text" name="age" placeholder="Enter age"><br>
Gender      :
<input type="text" name="gender" placeholder="Enter gender"><br>
Symptoms    :
<input type="text" name="symptoms" placeholder="Enter symptoms"><br>
Diagnosis    :
<input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
Prescription   :
<input type="text" name="prescription" placeholder="Enter prescription"><br>
Advice       :
<input type="text" name="advice" placeholder="Enter advice"><br>
<input type="submit" value="Submit">
</div></centre>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// 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>
What happens is that we arrive at this page by redirecting from another page. On reaching here, the page should be blank for a moment, and then the modal would pop up. Please tell me how to do

try this instead,
wait 2 sec(2000ms) to view popup.
setTimeout(function(){
if($(".modal").css("display")=="none"){
$(".modal").css("display","block") ;
}
}, 2000);
setTimeout(function(){
if($(".modal").css("display")=="none"){
$(".modal").css("display","block") ;
}
}, 2000);
body {font-family: Arial, Helvetica, sans-serif;}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 10%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* 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 */
padding-top: 60px;
text-align : centre
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
p{color:white;text-align:center;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body style = "background-color : blue">
<h2 style = "text-align: center;">Let's Start</h2>
<p>Wait 2seconds to popup show</p>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
Name       :
<input type="text" name="name" placeholder="Enter name"><br>
Age         :
<input type="text" name="age" placeholder="Enter age"><br>
Gender      :
<input type="text" name="gender" placeholder="Enter gender"><br>
Symptoms    :
<input type="text" name="symptoms" placeholder="Enter symptoms"><br>
Diagnosis    :
<input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
Prescription   :
<input type="text" name="prescription" placeholder="Enter prescription"><br>
Advice       :
<input type="text" name="advice" placeholder="Enter advice"><br>
<input type="submit" value="Submit">
</div></centre>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// 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>

divi page make popup before img

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>

CSS Animation when closing modal

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>