How to show an image in a pop-up window

How to show an image in a pop-up window

 How to show an image in a pop-up window

How to add popup image with link in your html and php website - Image pop up With website url

this below code will using any development website - Like PHP, HTML, Wordpress And Other

Image pop up With website url


<div id = "popup" class = "hidden modal">

<a href="  link " target="_blank"> 

<image src=" image url " alt=”   ” > </a>

 <h2> <p style="color:red;">   <a href=" link ”  target="_blank" >

 Book Now  </a>  </p>  </h2>

  <div class="modal-footer">

               <button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>





#popup {

  display: inline-block;

  opacity: 0;

  position: fixed;

  top: 20%;

  left: 50%;

  padding: 1em;

  transform: translateX(-50%);

  background: #fff;

  border: 1px solid #888;

  box-shadow: 1px 1px .5em 0 rgba(0, 0, 0, .5);

  transition: opacity .3s ease-in-out;




#popup.hidden {

  display: none;


#popup.fade-in {

  opacity: 1;




window.onload = function () {

  /* Cache the popup. */

  var popup = document.getElementById("popup");


  /* Show the popup. */



  /* Fade the popup in */



  /* Close the popup when a city is selected. */

  document.getElementById("close").onclick = function () {

     /* Fade the popup out */



     /* Hide the popup. */

     setTimeout(()=>popup.classList.add("hidden"), 300);




follow on twitter

Follow Our Page


Visitor Counter = visitor counter

About Us

Rakesh Tech Solutions is one of the Best and Professional Digital Marketing Angency , Trainings And Website Design And Developmen, Logo Design, Brochure Design And Mobile App Devlopement in Hyderabad, Telangana, India