how to make a pop up image in html?

Today, We want to share with you how to make a pop up image in html.In this post we will show you how to create popup in html with css, hear for html code for popup window on page load we will give you demo and example for implement.In this post, we will learn about Jquery Responsive Fancybox Popup with an example.

how to display image in popup window using javascript?

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#loveProfile {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#loveProfile:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* 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%;
  }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>4CGandhi Chankya KrutiDev Unicode Font Converter. A useful free Hindi font converter for newspaper and magazine copywriters and editors for free use.</p>
<p>Hindi Font Converter, Chanakya kundli krutidev to Unicode Converter,4cgandhi Unicode to Chanakya krutidev kundli Converter.</p>

<img id="loveProfile" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>

var modal = document.getElementById("myModal");


var img = document.getElementById("loveProfile");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  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";
}
</script>

</body>
</html>

As Simple As It Gets CSS Popup Image Tutorial

HTML Code

<div id="compactimgwrap">
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
</div>

CSS Code

#compactimgwrap {
	position:relative;
	margin:75px auto;
	width:252px; height:252px;
}
.compactimg img { 
	border:1px solid #000;
	margin:3px;
	float:left;
}
.compactimg span { 
	position:absolute;
	visibility:hidden;
}
.compactimg:hover, .compactimg:hover span { 
	visibility:visible;
	top:0; left:250px; 
	z-index:1;
}

Example 2:

HTML Code:

<div id="compactimgwrap">
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/4cgandhi.jpg" alt=""><span><img src="movies/4cgandhibig.jpg" alt=""></span></a>
<a class="compactimg" href="#"><img src="movies/tamilrokers.jpg" alt=""><span><img src="movies/tamilrokersbig.jpg" alt=""></span></a>
</div>

CSS Code:

#compactimgwrap {
	margin:75px auto;
	width:252px; height:252px;
}
.compactimg {
	float:left; /* must be floated for same cross browser position of larger image */
	position:relative;
	margin:3px;
}
.compactimg img { 
	border:1px solid #000;
	vertical-align:bottom;
}
.compactimg:hover {
	border:0; /* IE6 needs this to show large image */
	z-index:1;
}
.compactimg span { 
	position:absolute;
	visibility:hidden;
}
.compactimg:hover span { 
	visibility:visible;
	top:37px; left:37px; 
}
	

I hope you get an idea about html popup window onclick.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.