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:

Read Also:  CSS Modal Popup Box Window Plugins

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.

Read Also:  $interval Service using Angular Example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to allow only 10 digit number validation in Jquery Example?
  2. Read Also:  Laravel 500 internal server error
  3. Read Also:  Connecting to MySQL from the command line steps
  4. Read Also:  Vue.js Alert popup-Dialog Box using PHP and CSS
  5. Read Also:  Simple Model Popup Box using HTML CSS and JavaScript
  6. Read Also:  Laravel 7 jQuery Ajax Request Tutorial
  7. Read Also:  Create Different CSS Geometric Shapes with Example
  8. Read Also:  PHP Important Interview questions and answers
  9. Read Also:  AngularJS Confirm Password Validation Example
  10. Read Also:  how to display image in popup window using javascript or jQuery?
CLOSEX